使用 \B 实现 RegExp 的表情符号与包含字母的表情符号不匹配

Question

我正在为一个游戏项目开发一个聊天客户端，并且正在实施表情符号。表情符号在聊天中的显示位置的基本规则是，当它们直接位于文本旁边时，它们不会出现。

我创建了正则表达式：\B(emoticontext)\B。

不幸的是，我遇到了一个问题，除了包含字母的表情之外，这对每个表情都非常有效。 （例如：D、O_o 等）

我不知道如何补救这种情况。

function parseEmoticons(text) {
    var pattern;
    emoticons.forEach(function (emoticon) {
        pattern = new RegExp("\\B" + emoticon.string + "\\B", 'g');
        text = text.replace(pattern, emoticon.img);
    });
    return text;
}

这是表情符号数组的一部分，用于上下文。

  { 'string': ':\\)', 'img': '<img src="' + imgpath + 'emoticons/smile.png" class="emoticon"/>' },
    { 'string': ':O', 'img': '<img src="' + imgpath + 'emoticons/surprised.png" class="emoticon"/>' },
    { 'string': ':D', 'img': '<img src="' + imgpath + 'emoticons/happy.png" class="emoticon"/>' },

Answer 1

直接在文本旁边时不出现

这听起来更像是您想检查周围的空白，而不是 \B（“非单词边界”）。

即：

var pattern = new RegExp('(^|\\s)' + emoticon.string.replace(/\W/g, '\\$&') + '(?!\\S)', 'g');
text = text.replace(pattern, function (m0, m1) { return m1 + emoticon.img; });

注意事项：

• (^|\s) 检查（并捕获）字符串或空白字符的开头
• .replace(/\W/g, '\\$&') 转义表​​情符号中所有潜在的正则表达式元字符（这意味着您可能必须将表情符号列表中的 ':\\)' 更改为 ':)'）
• (?!\S)（“后面不跟非空格字符”）确保表情符号后面跟空格或字符串结尾（我们不能在开头使用相同的技巧，因为 JavaScript 不支持外观-后面）
• 由于我们可能在开头捕获了一个空格字符，因此我们必须将它与我们的 HTML 代码一起替换回
• 我们可以使用 .replace(pattern, '$1' + emoticon.img) 做到这一点，但如果 emoticon.img 最终包含 .replace 可以理解和解释的特殊 $ 模式之一，则会导致问题
• 相反，我们使用替换函数，它获取整个匹配的字符串和捕获组（以及其他一些内容）作为参数（但我们只关心第一个捕获组）