搜索结果列表渲染后无法正确高亮关键词怎么办？

码农瑞红提问于 2026-03-19 21:28:21 阅读 69

交互

我用 JavaScript 动态渲染搜索结果，想把用户输入的关键词在结果中高亮显示，但试了好几种方法都不对。比如我把关键词替换成 <mark>关键词</mark>，结果页面上直接显示了 HTML 标签文本，而不是真正的高亮效果。

我用的是 innerText 赋值的，是不是应该换别的方法？下面是我现在处理高亮的函数：

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

然后通过 resultItem.innerText = highlightKeyword(item.title, query) 设置内容。这样肯定不对，但不知道该怎么改才能让 <mark> 真正生效。

我来解答赞 2 收藏

反馈

1 条解答

上官星辰 Lv1

问题就是 innerText 不解析 HTML 标签，换成 innerHTML 就行。另外你的代码里 <mark> 应该是：

function highlightKeyword(text, keyword) {

  const regex = new RegExp(keyword, 'gi');

  return text.replace(regex, '$&');

}

resultItem.innerHTML = highlightKeyword(item.title, query);

搞定了。

2026-03-19 21:36