会删掉你选中文本的搜索高亮
来源：dev.to — 2026-09-13
📋 概述
用户报告选中一段文字复制后粘贴不出来，原因是几秒前在搜索框里输入的关键词触发了高亮重建：每次按键都把整段用 innerHTML 重写一遍。作者解释浏览器选区本质是一组指向具体节点的 Range，而给 innerHTML 赋值会删掉全部旧子节点并重新解析，节点一旦被移除，指向它的 Range 就一起消失，与是否命中关键词毫无关系。正解是 CSS Custom Highlight API：只给文本范围加样式，完全不碰 DOM 结构。
🔑 核心要点
- 破坏选区的不是正则也不是 mark 标签，而是 innerHTML 赋值本身。
- 设置 innerHTML 不做 diff，会移除全部子节点后重新解析，所有锚定其上的 Range 随之消失。
- 选区被清空是无条件的，与用户选中内容是否命中搜索词无关。
- 手动记录偏移再重建 Range，等于每敲一个键都自己实现选区保持。
- CSS Custom Highlight API 用 Range 加 ::highlight 伪元素着色，不插入、删除或拆分任何节点。
💡 金句
他们的选区不是被弄坏了，而是被一段跟复制毫无关系的代码，一个节点一个节点地删掉了。
👍 0
👎 0
← 返回 dev.to 首页