当前位置：首页 > 文章列表 > 文章 > 前端 > 在 HTML 中，若要通过 Highlight 的 add 方法将 Range 添加到高亮注册表（highlight registry），通常需要结合使用 JavaScript 和浏览器的 Selection API 或 Range 对象。以下是一个基本示例，说明如何实现这一操作。✅ 示例：使用 window.getSelection() 获取选区并添加到高亮注册表// 获取当前选区 const
在 HTML 中，若要通过 Highlight 的 add 方法将 Range 添加到高亮注册表（highlight registry），通常需要结合使用 JavaScript 和浏览器的 Selection API 或 Range 对象。以下是一个基本示例，说明如何实现这一操作。✅ 示例：使用 window.getSelection() 获取选区并添加到高亮注册表// 获取当前选区 const
本文深入解析了现代浏览器（仅 Chromium 120+）中基于 CSS Highlight API 实现文本高亮的正确实践：澄清了常见误区——Highlight 是抽象基类，不可直接实例化或调用 add() 方法；强调必须通过继承 Highlight 创建自定义子类（如 KeywordHighlight），在其中实现 getRanges() 返回有效 Range 数组，并利用 document.highlightRegistry.set(name, highlight) 将其注册到高亮注册表；同时详解了配套的 CSS ::highlight(name) 伪元素用法、adoptedStyleSheets 动态注入样式、Range 生命周期管理等关键细节，直击 Range 失效、样式不生效、环境兼容性等高频痛点，为构建稳定、可维护的前端高亮功能提供权威、落地的技术指南。
Highlight.add() 为什么报错 “not a function”
因为 Highlight 是一个抽象基类，不能直接实例化，更没有静态 add 方法。你真正要操作的是 HighlightRegistry 实例，它通过 document.adoptedStyleSheets 关联的 CSSOM API 配合使用——但注意：目前（2024 年中）HighlightRegistry 仅在 Chrome 120+ 启用，且需开启实验性 flag（chrome://flags/#enable-experimental-web-platform-features），否则 document.highlightRegistry 是 undefined。
- 检查环境：
if ('highlightRegistry' in document)必须为true，否则跳过 Highlight子类必须显式定义（如class MyHighlight extends Highlight），不能直接 new Highlight()add()是HighlightRegistry实例方法，不是Highlight上的方法
如何正确注册 Range 高亮并绑定到自定义 Highlight 类
核心流程是：创建 Range → 封装进自定义 Highlight 子类实例 → 调用 registry 的 set()（不是 add()）存入命名条目。这里没有 add() 方法；HighlightRegistry 使用 set(name, highlight) 和 get(name) 管理映射。
- Range 必须是有效、已连接文档的范围（
range.intersectsNode(el)可预检） - 自定义类必须继承
Highlight并实现getRanges()，返回Array - 注册时 name 是字符串键，后续 CSS 用
::highlight(my-highlight)引用
class KeywordHighlight extends Highlight {
constructor(ranges) {
super();
this._ranges = ranges;
}
getRanges() {
return this._ranges;
}
}
const range = document.createRange();
range.selectNode(document.querySelector('p'));
document.highlightRegistry.set('keyword', new KeywordHighlight([range]));
CSS 中怎么匹配并样式化这个高亮
CSS 里用 ::highlight() 伪元素，括号内名称必须与 registry.set() 的第一个参数完全一致（区分大小写、不可含空格）。
- 必须配合
adoptedStyleSheets注入，不能写在
