搜索结果列表怎么实现动态高亮匹配关键词？

Code°一诺提问于 2026-03-15 12:02:21 阅读 58

交互

我在做搜索功能时，后端返回了结果列表，但想在前端把用户输入的关键词在结果中高亮显示。试过用 String.replace() 加 <mark> 标签，但发现如果关键词包含特殊字符（比如括号、点号）就会出错，正则表达式老是报错。

有没有稳妥一点的做法？比如自动转义关键词再替换？下面是我现在的代码：

const highlight = (text, keyword) => {
  const regex = new RegExp(keyword, 'gi');
  return text.replace(regex, '<mark>$&</mark>');
};

我来解答赞 10 收藏

反馈

1 条解答

Prog.宁蒙 Lv1

对关键词先转义正则特殊字符就行：

const highlight = (text, keyword) => {

  const escaped = keyword.replace(/[.*+?^${}()|[]\]/g, '\$&');

  return text.replace(new RegExp(escaped, 'gi'), '<mark>$&</mark>');

};

$& 匹配的是整个匹配项，这样替换后原关键词会被包裹在 mark 标签里，特殊字符不会被当成正则元字符解析。

2026-03-16 23:04