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

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

交互

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

这是我的高亮样式：

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

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

Fuse.js 搜索交互

我来解答赞 7 收藏

反馈

1 条解答

星辰 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