HTML选区本质是DOM边界而非字符串，由anchorNode/focusNode及对应偏移量定义；selection.toString()会丢失结构和语义，应优先用getRangeAt(0)?.toString().trim()且需校验rangeCount>0。
HTML 选区不能直接当字符串用，必须通过 Range API 拆解或重建；否则会丢结构、错位、跨节点失效。
getSelection() 返回的 Selection 对象到底在选什么
它不记录“一段文字”，而是记录两个 DOM 边界：anchorNode 和 focusNode（起止节点），以及对应偏移量 anchorOffset/focusOffset。偏移量含义取决于节点类型：Text 节点是字符索引，Element 节点是子节点序号。
这意味着：
- 选中
Hello world!
anchorNode可能是，anchorOffset是 0；focusNode可能是的末尾 Text 节点，focusOffset是 1 - 反向选择（鼠标从右往左拖）会导致
anchorOffset > focusOffset，需用range.startOffset/range.endOffset统一处理 - 若
selection.rangeCount === 0，常见原因是页面未聚焦、或选区在跨源内——不是 bug，是规范行为
想取纯文本？别信 selection.toString() 的“直观”
selection.toString() 确实返回字符串，但它会把换行转为空格、合并连续空白、丢弃所有语义（比如 和 全变成普通字），且在 或 contenteditable=false 元素里可能返回空。
更稳的做法：
- 优先用
selection.getRangeAt(0)?.toString().trim()，前提是确保rangeCount > 0 - 若需兼容多范围（如表格中隔行选单元格），必须遍历
for (let i = 0; i ，再逐个toString() - 避免用
document.getSelection().getRangeAt(0).cloneContents().textContent——cloneContents()返回 DocumentFragment，但textContent仍会抹平标签语义，和toString()无本质区别
要在选区位置插入 HTML，绕开 execCommand('insertHTML')
document.execCommand('insertHTML', false, '...') 已废弃，在 Chrome/Safari/Firefox 行为不一致：Safari 强制包裹 ，Firefox 拒绝解析含属性的标签， 或 内直接静默失败。
安全写法分三步：
- 先取范围：
const range = selection.getRangeAt(0) - 清除原内容：
range.deleteContents()（不删会残留旧文本） - 插入新节点：
range.insertNode(document.createElement('em'))或range.insertNode(document.createTextNode('hi'))；不要用innerHTML，它触发重排，干扰后续选区计算
注意：insertNode() 插入后光标默认落在新节点末尾，如果要保持在开头，得提前 range.cloneRange() 记录位置，操作完再 selection.removeAllRanges(); selection.addRange(newRange)。
修改后光标乱跳？因为浏览器没义务“记住你想放哪”
DOM 修改后，浏览器按默认策略恢复选区：通常锚定在被插入/替换节点的末尾，而不是你操作前的位置。这不是 bug，是标准行为。
关键防御动作：
- 操作前备份原始 range：
const originalRange = selection.getRangeAt(0).cloneRange() - 特别关注
originalRange.startContainer和originalRange.startOffset——它们比 anchor/focus 更可靠，不受反向选择干扰 - 操作完成后，手动重建选区：
selection.removeAllRanges()→range.setStart(...)→selection.addRange(range) - 如果插入的是纯文本节点，用
document.createTextNode()而非innerHTML，前者不会引发 layout thrashing，选区计算更稳定
最易被忽略的一点：跨 场景下，getSelection() 必须显式调用 iframe.contentDocument.getSelection()，且 iframe 必须同源；否则永远拿不到 range，后续所有操作都无效。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
