如何使用JavaScript正则匹配包含表情符号组合的黑名单文本

我明白你的问题了——原来的正则用了\b（ASCII单词边界），但表情符号不属于传统的“单词字符”（\w，仅包含字母、数字、下划线），所以表情组合的前后不会被\b识别为有效边界，自然就匹配不到。下面给你两个可行的解决方案，兼顾不同浏览器的兼容性：

方案一：现代浏览器优先（用Unicode属性类+环视断言） #

我们可以自定义一个适用于所有字符的“边界规则”，替代原来的\b。这个规则会匹配：要么是字符串开头/结尾，要么前后是不属于“广义单词字符”（包括多语言文字、数字、下划线）的字符，这样表情符号组合的前后边界就能被正确识别了。

修改后的完整代码如下：

// 工具函数：转义正则特殊字符，避免黑名单里的特殊字符破坏正则逻辑
function escapeRegExp(string) {
  return string.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
}

let blacklist = ['drat', 'shoot', 'gosh darn', '郎'];
// 先转义每个黑名单项的正则特殊字符
let escapedBlacklist = blacklist.map(escapeRegExp);
// 用Unicode属性类和环视断言替代\b，u标志支持Unicode解析
let regexp = new RegExp(`(?<=^|[^\\p{L}\\p{N}_])(${escapedBlacklist.join('|')})(?=$|[^\\p{L}\\p{N}_])`, 'giu');

document.querySelectorAll('.text').forEach(el => {
  let html = el.innerHTML.replace(regexp, '<mark class="highlight">$&</mark>');
  el.innerHTML = html;
});

.highlight { background: yellow; }

<div class="text">foo DRAT baz darn</div>
<div class="text">foo 郎 baz gosh darn 郎</div>

方案二：兼容旧浏览器（用捕获组替代后环视） #

如果需要兼容不支持ES2018后环视的旧浏览器（比如IE或老版本Chrome/Firefox），可以改用捕获组保存前面的边界字符，替换时再把边界字符放回去，效果完全一致：

只需要修改JS里的正则和替换逻辑：

// 工具函数同上
function escapeRegExp(string) {
  return string.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
}

let blacklist = ['drat', 'shoot', 'gosh darn', '郎'];
let escapedBlacklist = blacklist.map(escapeRegExp);
// 捕获前面的边界字符，用前瞻替代后环视
let regexp = new RegExp(`(^|[^\\p{L}\\p{N}_])(${escapedBlacklist.join('|')})(?=$|[^\\p{L}\\p{N}_])`, 'giu');

document.querySelectorAll('.text').forEach(el => {
  // 把捕获的边界字符$1放回去，再高亮目标内容$2
  let html = el.innerHTML.replace(regexp, '$1<mark class="highlight">$2</mark>');
  el.innerHTML = html;
});

效果说明 #

修改后，不管是大写的DRAT、短语gosh darn，还是表情组合郎，都会被正确匹配并高亮；而单独的darn或郎因为不在黑名单里，不会被高亮，完全符合你的需求。

注意事项 #

1. 黑名单项转义：一定要用escapeRegExp转义黑名单里的特殊字符（比如.、*、+等），否则这些字符会被当作正则语法解析，导致匹配异常。
2. Unicode标志u：正则必须加u标志，否则无法正确解析Unicode属性类和表情符号。
3. 多词短语支持：黑名单里的多词短语（比如gosh darn）会被正常匹配，因为我们的边界规则只作用于整个短语的首尾，不会影响短语内部的空格。

备注：内容来源于stack exchange，提问作者lonix