含撇号的正则表达式单词搜索问题及代码修改咨询

这个问题其实是两个常见坑的叠加：一是正则元字符未转义导致匹配失效，二是字符串拼接时的引号冲突引发语法错误。咱们一步步解决：

问题根源 #

1. 正则特殊字符干扰：像.、*、(这类字符在正则里是有特殊含义的元字符，直接拼进正则表达式会被当作语法解析，而不是普通文本，自然匹配不到你想要的内容；
2. 引号冲突报错：如果搜索字符串包含单引号'（比如don't），你原来用单引号拼接正则源字符串时，会导致字符串提前闭合，出现语法错误，连正则都构建不出来，更别说匹配了。

解决方案 #

首先实现一个正则特殊字符转义函数，把所有正则元字符转义成普通文本；然后用模板字符串构建正则，避免引号冲突。

1. 正则转义函数

function escapeRegExp(str) {
  // 转义所有正则特殊元字符：^ $ . * + ? | ( ) [ ] { } \
  return str.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
}

这个函数会给每个正则特殊字符加上反斜杠，让它们失去特殊含义，变成普通字符。

2. 修改后的高亮函数

highlightStr: function (body, searchString){
  console.log(searchString);
  // 先转义搜索字符串中的正则特殊字符
  const escapedSearch = escapeRegExp(searchString);
  // 使用模板字符串构建正则，避免单引号冲突
  const regex = new RegExp(`(${escapedSearch})`, 'gi');
  console.log(regex);
  // 替换为实际的HTML标签（原来的实体编码会被浏览器当成文本显示）
  return body.replace(regex, "<span class='text-highlight'>$1</span>");
}

为什么这样有效？ #

• 转义后的搜索字符串不会干扰正则语法，比如搜索hello.world时，转义后变成hello\.world，正则会精准匹配带点的文本；
• 模板字符串（反引号包裹）可以安全处理内部的单引号，像don't这样的搜索词不会再导致字符串截断；
• 把</>换成实际的</>，替换后的HTML才能被浏览器正确解析为高亮的span元素。

测试示例 #

如果传入的body是I don't like regex issues.，searchString是don't，函数会返回：

I <span class='text-highlight'>don't</span> like regex issues.

完美实现目标文本的高亮。

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