如何在不改DOM的情况下，通过CSS.highlights高效实现搜索结果的高亮显示？

本文共计958个文字，预计阅读时间需要4分钟。

可以使用CSS Custom Highlight API实现——它专门为这类场景设计，不触碰DOM、不触发重绘、样式可动态控制。

核心四步：Range → Highlight → 注册 → 样式

整个流程分四个不可跳过的环节，缺一不可：

• 创建 Range 对象：精准定位要高亮的文本位置。必须基于文本节点（如 Text 类型节点），不能直接传入 div 或 p 元素。偏移量（offset）从节点开头算起，单位是 Unicode 码点数（不是字符数，注意 emoji 或代理对）。
• 构造 Highlight 实例：把一个或多个 Range 传进去，生成高亮逻辑单元。同一个 Highlight 可管理多个不连续片段，比如搜索词在段落中出现三次，就传三个 Range。
• 注册到 CSS.highlights：调用 CSS.highlights.set("search-highlight", highlight)。名称字符串会作为 ::highlight() 的参数，必须全局唯一；重复注册会覆盖前值。
• 用 ::highlight() 写样式：只支持有限样式属性，包括 background-color、color、text-decoration、text-shadow、-webkit-text-stroke 和 -webkit-text-fill-color。不支持 background-image 或渐变。

关键细节：如何准确定位文本范围

不能靠 innerHTML 字符索引硬算，必须走 DOM 树遍历获取真实文本节点和偏移。常用做法是：

• 用 document.createTreeWalker(root, NodeFilter.SHOW_TEXT) 收集所有文本节点；
• 对每个文本节点内容执行 String.indexOf(keyword, fromIndex)，记录匹配起止位置；
• 调用 range.setStart(textNode, startOffset) 和 range.setEnd(textNode, endOffset) —— 注意 offset 是相对于该文本节点开头的码点偏移，不是全文档位置。
• 遇到大小写不敏感需求，统一转小写比对，但 Range 必须在原始大小写文本节点上创建。

性能与兼容性注意事项

这套方案虽高效，但有现实约束：

立即学习“前端免费学习笔记（深入）”；

• 浏览器支持：Chrome 105+、Edge 105+、Firefox Nightly 已启用；Safari 尚未支持，需降级 fallback（例如用 <mark> 包裹）。
• 大量高亮时别频繁 set/delete：每次 CSS.highlights.set 都会触发样式重计算。建议复用同一注册名，仅更新 Highlight 实例内部 Range 列表（Highlight 是可变对象，支持 highlight.add(range) 和 highlight.delete(range)）。
• 不支持跨节点内联高亮：比如关键词横跨两个相邻 span，无法用单个 Range 覆盖。需拆成两个 Range 分别处理，并确保它们属于同一 Highlight 才能统一样式。
• 清除高亮只需 delete 注册名：如 CSS.highlights.delete("search-highlight")，无需手动清理 DOM。

简单可用示例（搜索触发）

用户输入 “hello” 后，对 #content 区域内所有匹配做高亮：

const content = document.getElementById('content'); const walker = document.createTreeWalker(content, NodeFilter.SHOW_TEXT); const ranges = []; let node; while (node = walker.nextNode()) { const text = node.nodeValue; let idx = text.toLowerCase().indexOf('hello'); while (idx !== -1) { const range = new Range(); range.setStart(node, idx); range.setEnd(node, idx + 5); // 'hello'.length ranges.push(range); idx = text.toLowerCase().indexOf('hello', idx + 1); } } if (ranges.length) { const highlight = new Highlight(...ranges); CSS.highlights.set('search-highlight', highlight); }

对应 CSS：

::highlight(search-highlight) { background-color: #ffeb3b; color: #212121; }