JavaScript正则无法匹配含特殊字符单词 字符串高亮功能异常问题

核心问题原因 #

• 未对正则特殊字符转义：.、?、+、*这类字符在正则语法中有特殊含义，直接拼接进正则表达式会被当成规则执行，而非匹配字面量字符。比如你要匹配的etc.里的.，正则默认会匹配任意字符，而非字面量的英文句号。
• \b单词边界规则不匹配需求：\b只识别\w（字母、数字、下划线）和非\w字符的交界。etc.结尾的.是非\w字符，后面跟的空格也属于非\w，二者之间没有\b边界；»、«属于Unicode符号，本身就不属于\w范围，前后不可能触发\b匹配，因此完全识别不到。
• 原代码还存在语法错误：words数组最后一项«缺少引号，会直接报错。

修复方案 #

步骤1：新增正则特殊字符转义函数 #

将目标词里的正则特殊字符转义为字面量匹配模式

步骤2：替换单词边界规则 #

用支持Unicode的零宽断言替代\b，适配所有字符的边界判断（字符串首尾、空白、任意标点）

步骤3：优化逻辑 #

把换行处理移出循环，避免多次重复执行

完整可运行代码 #

const words = ["Hello", "dog", "etc.", "»", "«"];

// 正则特殊字符转义工具
const escapeRegExp = (str) => str.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');

const applyHighlights = (text) => {
  // 可选：按词长度降序排序，避免短词先匹配覆盖长词
  words.sort((a, b) => b.length - a.length)
  words.forEach((word) => {
    const escapedWord = escapeRegExp(word);
    // u修饰符开启Unicode支持，\p{P}匹配所有语言的标点符号
    const re = new RegExp(`(?<=^|\\s|\\p{P})${escapedWord}(?=$|\\s|\\p{P})`, "giu");
    text = text.replace(re, "<mark>$&</mark>");
  });
  text = text.replace(/\n$/g, "\n\n");
  return text;
};

// 测试调用
applyHighlights("Hello I am a dog etc. »are you?«");

运行结果 #

<mark>Hello</mark> I am a <mark>dog</mark> <mark>etc.</mark> <mark>»</mark>are you?<mark>«</mark>

完全符合预期。

内容的提问来源于stack exchange，提问作者Morten Vestergaard