css highlights 实现搜索高亮的核心是绕过 dom 插入、交由渲染层处理样式，适用于文档预览等中高频搜索场景；需用 treewalker + range 精准定位文本节点并归一化匹配，通过 highlight 对象注册多组 range，配合 ::highlight() 限定样式能力，兼容性需检测并降级。
用 CSS Highlights 实现搜索高亮，核心是绕过 DOM 插入、避免重排重绘，把样式控制交给渲染层。它适合中高频搜索场景，比如文档预览、日志检索、代码片段搜索等。
定位文本范围：用 TreeWalker + Range 精准抓取
不能直接对 innerHTML 做正则替换，得逐个文本节点处理，否则会破坏结构或误匹配 HTML 标签内容。
- 用
document.createTreeWalker(element, NodeFilter.SHOW_TEXT)遍历所有纯文本节点，过滤掉 script、style、注释等干扰项 - 对每个文本节点内容执行关键词匹配（注意大小写、全词匹配、转义特殊字符）
- 每次匹配成功后，调用
range.setStart(node, startOffset)和range.setEnd(node, endOffset)创建 Range 对象 - 特别注意换行、空格、Unicode 组合字符可能影响 offset 计算，建议先 normalize 文本再匹配
批量管理高亮：Highlight 对象与注册表协同
一个 Highlight 实例可容纳多个 Range，适合同一类搜索结果（如“用户输入的关键词”）；不同语义的高亮（如错误标记、引用标注）应分注册名隔离。
- 创建
const highlight = new Highlight(...ranges)，支持传入数组或多个参数 - 用
CSS.highlights.set("search-result", highlight)注册，名称必须是合法 CSS 标识符 - 搜索条件变更时，直接覆盖同名注册项即可更新，无需手动清理旧 Range
- 需要清除全部高亮？调用
CSS.highlights.clear()，比遍历 DOM 删除 span 快得多
样式定义：::highlight() 的能力边界与技巧
::highlight() 支持的样式有限，但足够满足主流高亮需求；它不支持 background-image 或 transform，但可组合 text-shadow + background-color 模拟轻微立体感。
- 只允许使用：
color、background-color、text-decoration（含 wavy/overline）、text-shadow、-webkit-text-stroke - 避免在 ::highlight 中写
!important，它会被忽略；样式优先级由注册顺序和 CSS 层叠规则决定 - 多关键词不同色？注册多个 Highlight，例如
"keyword-a"和"keyword-b"，再分别定义 ::highlight(keyword-a) 和 ::highlight(keyword-b) - 想加动画？可用
transition: background-color 0.2s，但仅限 color 和 background-color 可过渡
兼容性兜底与性能提示
Chrome 105+、Edge 105+、Firefox Nightly 已支持；Safari 尚未跟进。生产环境需做特性检测并降级。
- 检测方式：
if ("highlights" in CSS)，不支持时回落到传统 span 包裹方案 - 大量匹配（如万字文档搜 50+ 处）时，Range 创建本身有开销，建议节流搜索触发、限制单次高亮数量（如最多前 100 个）
- 不要在 scroll 事件中实时重建所有 Range，应缓存文本节点引用，只在搜索变更时重新计算
- 服务端可提前计算 offset 范围并下发 JSON，前端只负责 Range 构建与注册，进一步提速
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
