如何在不改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() 的参数，必须全局唯一；重复注册会覆盖前值。