HTML中使用Highlight API为任意文本范围添加自定义高亮样式-html教程-PHP中文网

highlight api 在 chrome 中需 chromium 119+ 且手动启用实验标志 chrome://flags/#enable-experimental-web-platform-features 才可用，firefox 和 safari 完全不支持；必须配合 ::highlight() 伪元素使用，仅支持 background-color、color、text-decoration 等有限样式，动态更新需重建 range 和 highlight 实例。

html中使用highlight api为任意文本范围添加自定义高亮样式

Highlight API 在 Chrome 中可用但需开启实验性功能

目前只有 Chromium 119+ 原生支持 Highlight API，且默认关闭。不手动启用 chrome://flags/#enable-experimental-web-platform-features，调用 document.createHighlight() 会直接报错 TypeError: document.createHighlight is not a function。

这个限制意味着：它不能用于生产环境的通用高亮需求，仅适合内部工具、浏览器插件或已知用户使用新版 Chrome 的场景。

Firefox 和 Safari 完全未实现该 API，document.createHighlight 为 undefined
即使在 Chrome 中，也必须配合 CSS ::highlight() 伪元素使用，单独创建 Highlight 对象无效
启用 flag 后需重启浏览器，刷新页面才生效 —— 很多开发者卡在这一步，以为代码写错了

如何用 Range 构造 Highlight 并注册到 CSSOM

Highlight API 不接受字符串或选择器，只认 Range 对象。你得先定位文本节点、创建 range、再传给 createHighlight()，最后通过 CSS.highlights.set() 注册。

常见错误是直接对 innerText 搜索后用 getBoundingClientRect() 模拟高亮 —— 这不是 Highlight API，也不触发 ::highlight() 样式。

必须用 document.createRange() + range.selectNodeContents(textNode) 或 setStart/setEnd 精确包裹文本节点片段
CSS.highlights.set("my-highlight", highlight) 中的 key 名（如 "my-highlight"）必须与 CSS 中 ::highlight(my-highlight) 完全一致，大小写敏感
一个 Highlight 实例可包含多个 range，但所有 range 必须属于同一文档上下文（跨 iframe 不行）

const range = document.createRange();
range.selectNodeContents(document.querySelector("p").childNodes[0]);
const highlight = document.createHighlight(range);
CSS.highlights.set("search-result", highlight);

::highlight() 伪元素的样式限制很实际

::highlight() 不是普通伪类，它不继承父元素样式，不支持 box-shadow、text-shadow、transform，甚至连 background-clip 都被忽略。能用的只有基础文本和背景控制。

Wechat HTML Publisher

直接上传HTML富文本到微信公众号草稿箱。支持完整的HTML格式,无需Markdown转换。

下载

比如想加圆角背景或描边效果？做不到。想让高亮随滚动平滑过渡？transition 在 ::highlight() 上完全无效。

支持的属性极少：background-color、color、text-decoration、text-emphasis、mix-blend-mode
background-color 是最稳定的选择；text-decoration: underline wavy red 可用于强调，但波浪线粗细不可控
不能用 !important 覆盖，也不能用 JS 动态修改样式 —— 所有样式必须写死在 CSS 规则里

/* ✅ 有效 */
::highlight(search-result) {
  background-color: #ffeb3b;
  color: #212121;
}
<p>/<em> ❌ 无效 </em>/
::highlight(search-result) {
border-radius: 4px; /<em> 被忽略 </em>/
transition: background-color 0.2s; /<em> 不触发 </em>/
}</p>

动态更新高亮必须重建 Range 和 Highlight 实例

Range 对象是“活”的，但一旦 DOM 变化（比如用户编辑内容、脚本插入新节点），原有 range 可能变成 collapsed 或指向不存在的节点，导致高亮消失或错位。API 没有“刷新”或“重绑定”方法。

这意味着：搜索关键词高亮、代码编辑器语法高亮这类动态场景，每次内容变更后都得重新走一遍 range 创建 → highlight 构造 → CSS.highlights.set 流程。

不要缓存 Range 对象长期复用，尤其在可编辑区域（contenteditable）中
避免在 input 事件中高频调用 CSS.highlights.set()，Chrome 当前实现下可能引发布局抖动
若需高性能更新（如每秒多次），建议先收集所有 range，批量构造一个 Highlight 实例，再单次 set —— 多次 set 同一个 key 会覆盖，但频繁覆盖仍有开销

现在这个 API 最实用的场景，其实是辅助技术集成或浏览器内调试工具：它能让高亮真正融入渲染流程，被屏幕阅读器感知，也能响应 CSS prefers-contrast 等媒体查询。但把它当成 mark 标签的替代品，就容易掉进兼容性和样式能力的坑里。