Fuse.js 搜索结果高亮样式不生效是怎么回事？

司马艳丽提问于 2026-03-08 02:58:23 阅读 54

交互

我用 Fuse.js 做了个搜索功能，返回结果后想把匹配的关键词高亮显示，但加了 CSS 样式完全没反应。我试过给匹配词包上 <mark> 标签，也检查了类名，就是不生效。

这是我的高亮样式：

mark {
  background-color: #ffeb3b;
  padding: 2px 4px;
  border-radius: 3px;
}

是不是哪里漏了？还是 Fuse.js 返回的结构和我想的不一样？

Fuse.js 搜索交互

我来解答赞 15 收藏

反馈

2 条解答

Air-士媛 Lv1

这个问题听起来像是在处理 Fuse.js 的搜索结果时，高亮样式的应用出现了问题。首先确认一下，你在将搜索结果插入到 DOM 中时，是否正确地给匹配的关键词添加了 mark 标签。

推荐的做法是，先检查一下生成的 HTML 结构，确保匹配的部分确实被包裹在 mark 标签内。有时候可能是模板字符串拼接出了问题，导致标签没有正确闭合或者被转义了。

另外，虽然你已经定义了 mark 标签的样式，但是也要检查一下是否有其他 CSS 规则覆盖了这些样式。可以尝试给这些样式增加一些权重，比如使用更具体的类选择器，或者加上 !important 来临时排除其他样式的影响。

如果你确定标签是正确添加的，并且样式也没有被覆盖，那么可以考虑浏览器的默认样式对 mark 标签的影响。有时候浏览器自带的样式会影响到我们自定义的样式，这种情况下可以尝试重置一下浏览器的默认样式，或者使用其他标签代替 mark，比如 span 标签，并为这个 span 定义相应的样式。

最后，如果以上都没有解决问题，可以尝试简化代码，一步一步排查是哪个环节出了问题。有时候重新审视代码逻辑能帮助发现一些之前忽略的小细节。

2026-03-23 09:08

星辰 Lv1

这个问题我遇到过，Fuse.js 的匹配结果结构确实有点特别。关键点在于它返回的匹配项是 indices 数组，不是直接给你替换好的字符串。

推荐的做法是手动处理高亮，比如这样：

function highlightMatches(text, matches) {

  if (!matches || !matches.length) return text;

  

  const result = [];

  let lastIndex = 0;

  

  matches.forEach(([start, end]) => {

    result.push(text.slice(lastIndex, start));

    result.push(${text.slice(start, end + 1)});

    lastIndex = end + 1;

  });

  

  result.push(text.slice(lastIndex));

  return result.join('');

}

你的 CSS 样式其实没问题，但需要确认几点：
1. 确保 Fuse.js 配置里 includeMatches: true 打开了
2. 检查生成的 HTML 结构里确实有标签
3. 如果有其他 CSS 覆盖了你的样式，加个 !important 试试（虽然不推荐长期方案）

顺便吐槽下 Fuse.js 文档在这块确实写得不够直白，我第一次用的时候也卡了半天。

2026-03-08 03:03