javascript - 使用\B 实现正则表达式，以处理与包含字母的表情符号不匹配的表情符号

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

do not appear when they are directly next to text

这听起来更像是您想要检查周围的空白，而不是 \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 理解和解释的特殊 $ 模式
• 相反，我们使用替换函数，它获取整个匹配的字符串和捕获组(以及其他一些东西)作为参数(但我们只关心第一个捕获组)