為什么javascript正則表達式與某些表情符號不匹配

Question

我實現了與表情符號組合鍵匹配的javascript函數，並將其替換為span和特定的CSS類。

我確定我測試了所有受支持表情符號的系統，並且所有替代產品都工作正常。 但是現在有些表情符號字符無法匹配，我不知道為什么。

對於前。 表情符號“：P”與我的正則表達式不匹配，但與“ :)”匹配。

匹配和替換字符的功能是：

/**
     * Replace combination of chars with emoticons
     * @param rawText string
     * @returns string
     * @private
     */

    chatWindow.prototype._processEmoticons = function(rawText) {
        var fbEmoticonHolder = '<span class="emoticon :HOLDER:"></span>';

        var replacementMap = {
            ':)' : fbEmoticonHolder.replace(':HOLDER:', 'smile'),
            ':-)' : fbEmoticonHolder.replace(':HOLDER:', 'smile'),
            ':(' : fbEmoticonHolder.replace(':HOLDER:', 'sad'),
            ':-(' : fbEmoticonHolder.replace(':HOLDER:', 'sad'),
            '8-)' : fbEmoticonHolder.replace(':HOLDER:', 'geek'),
            '8)' : fbEmoticonHolder.replace(':HOLDER:', 'geek'),
            'B-)' : fbEmoticonHolder.replace(':HOLDER:', 'geek'),
            'B)' : fbEmoticonHolder.replace(':HOLDER:', 'geek'),
            ':-P' : fbEmoticonHolder.replace(':HOLDER:', 'tongue'),
            ':P' : fbEmoticonHolder.replace(':HOLDER:', 'tongue'),
            ':-p' : fbEmoticonHolder.replace(':HOLDER:', 'tongue'),
            ':p' : fbEmoticonHolder.replace(':HOLDER:', 'tongue'),
            '=P' : fbEmoticonHolder.replace(':HOLDER:', 'tongue'),
            '=p' : fbEmoticonHolder.replace(':HOLDER:', 'tongue'),
            'o.O' : fbEmoticonHolder.replace(':HOLDER:', 'speechless'),
            'O.o' : fbEmoticonHolder.replace(':HOLDER:', 'speechless'),
            ':v' : fbEmoticonHolder.replace(':HOLDER:', 'pacman'),
            'O:)' : fbEmoticonHolder.replace(':HOLDER:', 'angel'),
            'O:-)' :  fbEmoticonHolder.replace(':HOLDER:', 'angel'),
            '<3' : fbEmoticonHolder.replace(':HOLDER:', 'heart'),
            ':\'(' : fbEmoticonHolder.replace(':HOLDER:', 'cry'),
            ':-D' : fbEmoticonHolder.replace(':HOLDER:', 'laugh'),
            ':D' : fbEmoticonHolder.replace(':HOLDER:', 'laugh'),
            '=D' : fbEmoticonHolder.replace(':HOLDER:', 'laugh'),
            '8-|' : fbEmoticonHolder.replace(':HOLDER:', 'cool'),
            '8|' : fbEmoticonHolder.replace(':HOLDER:', 'cool'),
            'B-|' : fbEmoticonHolder.replace(':HOLDER:', 'cool'),
            'B|' : fbEmoticonHolder.replace(':HOLDER:', 'cool'),
            ';-)' : fbEmoticonHolder.replace(':HOLDER:', 'wink'),
            ';)' : fbEmoticonHolder.replace(':HOLDER:', 'wink'),
            ':-&' : fbEmoticonHolder.replace(':HOLDER:', 'sick'),
            ':&' : fbEmoticonHolder.replace(':HOLDER:', 'sick'),
            ':-O' : fbEmoticonHolder.replace(':HOLDER:', 'shock'),
            ':O' : fbEmoticonHolder.replace(':HOLDER:', 'shock'),
            ':-o' : fbEmoticonHolder.replace(':HOLDER:', 'shock'),
            ':o' : fbEmoticonHolder.replace(':HOLDER:', 'shock'),
            '3:)' : fbEmoticonHolder.replace(':HOLDER:', 'devil'),
            '3:-)' : fbEmoticonHolder.replace(':HOLDER:', 'devil'),
            ':-/' : fbEmoticonHolder.replace(':HOLDER:', 'mixed'),
            ':/' : fbEmoticonHolder.replace(':HOLDER:', 'mixed'),
            ':-\\' : fbEmoticonHolder.replace(':HOLDER:', 'mixed'),
            ':\\' : fbEmoticonHolder.replace(':HOLDER:', 'mixed'),
            '[[f9.rainbow]]' : fbEmoticonHolder.replace(':HOLDER:', 'rainbow'),
            '[[f9.cake]]' : fbEmoticonHolder.replace(':HOLDER:', 'cake'),
            '[[f9.coffee]]' : fbEmoticonHolder.replace(':HOLDER:', 'coffee'),
            '[[f9.gift]]' : fbEmoticonHolder.replace(':HOLDER:', 'gift'),
            '[[f9.bomb]]' : fbEmoticonHolder.replace(':HOLDER:', 'bomb'),
            '[[f9.clap]]' : fbEmoticonHolder.replace(':HOLDER:', 'clap'),
            '[[f9.sleepy]]' : fbEmoticonHolder.replace(':HOLDER:', 'sleepy'),
            '[[f9.stary]]' : fbEmoticonHolder.replace(':HOLDER:', 'stary'),
            '[[f9.heartbreak]]' : fbEmoticonHolder.replace(':HOLDER:', 'heartbreak'),
            '[[f9.inlove]]' : fbEmoticonHolder.replace(':HOLDER:', 'inlove')
        };

        var charsForReplacement = [
            ':\\)', ':-\\)', ':\\(', ':-\\(', '8-\\)', '8\\)', 'B-\\)', 'B\\)', ':-P', ':P', ':-p', ':p', '=P', '=p', 'o.O',
            'O.o', ':v', 'O:\\)', 'O:-\\)', '<3', ':\'\\(', ':-D', ':D', '=D', '8-\\|', '8\\|', 'B-\\|', 'B\\|', ';-\\)',
            ';\\)', ':-&', ':&', ':-O', ':O', ':-o', ':o', '3:\\)', '3:-\\)', ':-/', ':/', ':-\\\\', ':\\\\',
            '\\[\\[f9.rainbow\\]\\]', '\\[\\[f9.cake\\]\\]', '\\[\\[f9.coffee\\]\\]', '\\[\\[f9.gift\\]\\]',
            '\\[\\[f9.bomb\\]\\]', '\\[\\[f9.clap\\]\\]', '\\[\\[f9.sleepy\\]\\]', '\\[\\[f9.stary\\]\\]',
            '\\[\\[f9.heartbreak\\]\\]', '\\[\\[f9.inlove\\]\\]'
        ];

        /*
         FOR TESTING PURPOSES (paste it in the chat window)

         :) :-) :( :-(
         8-) 8) B-) B) :-P :P :-p :p =P =p o.O O.o :v O:)
         O:-) <3 :'( :-D :D =D 8-| 8| B-| B| ;-) ;) :-& :& :-O :O :-o :o 3:) 3:-) :-/ :/ :-\ :\
         [[f9.rainbow]] [[f9.cake]] [[f9.coffee]] [[f9.gift]] [[f9.bomb]] [[f9.clap]] [[f9.sleepy]] [[f9.stary]] [[f9.heartbreak]] [[f9.inlove]]
         */

        // generate regex - START
        var regexPattern = '\\B(';

        for (var i in charsForReplacement) {
            regexPattern += '(?:' + charsForReplacement[i] + ')';

            if (i != charsForReplacement.length - 1) {
                regexPattern += '|';
            }
        }

        regexPattern += ')\\B(?!\\w)';
        // generate regex - END

        var regex = new RegExp(regexPattern, 'g');

        return rawText.replace(regex, function(match) {

            var replacement = $.trim(match);

            return match.replace(replacement, replacementMap[replacement]);
        });
    };

我想做的是創建匹配所有表情的正則表達式。 數組charsForReplacement用於創建常規exp。 模式，因為表情符號有時具有在正則表達式模式中為特殊字符的字符。

當表情符號匹配后，將使用replaceMap，然后讀取需要替換的內容。

生成的注冊表 實驗 模式是：

\\ B（（？：:)）|（？：:-)）|（？：:(）|（？：:-(）|（？：8-））|（？：8））|（？ ：B-））|（？：B））|（？::-P）|（？:: P）|（？::-p）|（？:: p）|（？：= P）| （？：= p）|（？：oO）|（？：Oo）|（？:: v）|（？：O :)）|（？：O :-)）|（？：<3）| （？::'（）|（？::-D）|（？:: D）|（？：= D）|（？：8- \\ |）|（？：8 \\ |）|（？ B- \\ |）|（？：B \\ |）|（？：;-)）|（？：;））|（？::-＆）|（？::＆）|（？::-O ）|（？:: O）|（？::-o）|（？:: o）|（？：3 :)）|（？：3 :-)）|（？::-/）|（ ？:: /）|（？::-\\）|（？:: \\）|（？：[[f9.rainbow]]）|（?? [[[f9.cake]]））（（？：[[ f9.coffee]]）|（？：[[[f9.gift]]）|（？：[[f9.bomb]]）|（？：[[f9.clap]]] |（？：[[f9。困]]）|（？：[[f9.stary]]）|（？：[[f9.heartbreak]]）|（?? [[f9.inlove]]））\\ B（？！\\ w）

但這看起來很復雜，但實際上並非如此。 那是因為有很多表情符號可以匹配。

例如，讓我們說我們只想匹配幾個表情符號，例如':)'，'：P'，'XD'然后匹配。 實驗 模式如下所示：

\\ B（（？：:)）|（？:: P）|（？：XD））\\ B（？！\\ w）

我需要你的幫助！

Answer 1

您應該擺脫表情符號。 所以:)的正則表達式是：\\）。 否則（：:)）是不平衡的正則表達式。

Answer 2

我解決了我的問題。 稍微更改正則表達式對我來說很好。 如果javascript支持正則表達式會容易得多，但事實並非如此。

所以我做了一些解決方法。 我將在較小的示例上顯示解決方案，因為完整示例太大。

舊的正則表達式如下：

\B((?::\))|(?::P)|(?:XD))\B(?!\w)

該正則表達式應與:)或：P或XD匹配，后跟至少一個空格字符或字符串的開頭，然后至少跟隨一個空格字符或字符串的結尾。

這些條件很重要，因為我不想匹配這樣的東西:) :)或asdf :)或：）asdf

它必須是清晰的圖釋。

我已經更改了正則表達式，最后我使用正向前行而不是負向前行，刪除了\\ B作為匹配字符串的邊界，並在正則表達式開始時添加了模擬正向后綴的代碼。

(^|\W)((?::\))|(?::P)|(?:XD))(?=(\s|$))

現在一切看起來都很好。 該修復程序將在早上http://starvibes.com上正式投入生產，因此您可以嘗試我們的Facebook聊天（在Facebook登錄后），看看一切都可以在這款出色的音樂網絡播放器上正常運行（甚至更多）。