可用CSS Custom Highlight API实现文本高亮，需四步：创建Range定位文本、构造Highlight实例、注册到CSS.highlights、用::highlight()写样式。
可以直接用 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（例如用
包裹）。 -
大量高亮时别频繁 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;
}
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
