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

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

交互

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

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

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

我来解答赞 3 收藏

反馈

暂无解答