如何通过HTML的Highlight API的Range对象指定需要高亮标注的文本范围

手动遍历文本节点并匹配关键词最可靠，尤其当目标文本被 HTML 标签切分时。不要依赖 innerHTML 字符串查找，它会混入标签字符。

• 用 document.createTreeWalker(document.body, NodeFilter.SHOW_TEXT) 遍历所有文本节点
• 对每个 node.textContent 执行 .indexOf(keyword)，拿到起始索引后调用 range.setStart(node, startIndex) 和 range.setEnd(node, startIndex + keyword.length)
• 若关键词跨两个相邻文本节点（如 “helloworld” 中搜索 “lowor”），需拆成两段 Range，Highlight API 支持一个 Highlight 包含多个 Range

Highlight 注册后不生效？检查 CSS 伪元素样式是否覆盖

即使 Range 构造正确、注册成功，没高亮大概率是 CSS 没配对。Highlight API 只提供语义标记，渲染完全依赖 ::highlight() 伪元素。

• 必须写 ::highlight(my-highlight)（括号内名称要和 Highlight 实例名一致），不能漏掉括号或写成 :highlight
• Chrome 目前只支持 background-color、color、text-decoration 等少数属性，border 或 box-shadow 会被忽略
• 若父容器有 overflow: hidden 或 transform，可能裁剪高亮区域——这是渲染层限制，Range 本身无误

动态更新高亮时，Range 对象不会自动同步 DOM 变化

原始 Range 绑定的是快照式节点引用。如果高亮范围内的 DOM 被删改（比如用户编辑内容、框架重渲染），该 Range 会变成“分离状态”，range.toString() 返回空字符串，但不会报错。

• 每次触发更新（如输入、AJAX 回填）后，必须重新执行文本匹配逻辑，重建 Range 数组
• 不要复用旧 Range 对象，哪怕只改了 setEnd() —— DOM 变动后其内部锚点已失效
• 可监听 MutationObserver 检测目标区域变化，但开销大；更实用的是在业务逻辑中明确插入/删除节点后主动刷新高亮

理论要掌握，实操不能落！以上关于《如何通过HTML的Highlight API的Range对象指定需要高亮标注的文本范围》的详细介绍，大家都掌握了吧！如果想要继续提升自己的能力，那么就来关注golang学习网公众号吧！