HTML选区如何操作文本？

HTML选区并非简单的文本字符串，而是基于DOM节点边界的精确范围标记，其核心在于anchorNode/focusNode与对应偏移量的组合；直接调用selection.toString()会严重丢失结构、语义和格式信息，正确做法是通过Range API（如getRangeAt(0)）安全提取内容或插入HTML，同时必须主动备份并手动恢复选区位置以避免光标乱跳——尤其在跨iframe等复杂场景下，忽略这些底层机制将导致文本操作失真、兼容性崩坏甚至功能静默失效。

HTML 选区不能直接当字符串用，必须通过 Range API 拆解或重建；否则会丢结构、错位、跨节点失效。

getSelection() 返回的 Selection 对象到底在选什么

它不记录“一段文字”，而是记录两个 DOM 边界：anchorNode 和 focusNode（起止节点），以及对应偏移量 anchorOffset/focusOffset。偏移量含义取决于节点类型：Text 节点是字符索引，Element 节点是子节点序号。

这意味着：

• 选中

  Hello world!

  中的 “world!”，anchorNode 可能是 ，anchorOffset 是 0；focusNode 可能是

  的末尾 Text 节点，focusOffset 是 1

• 反向选择（鼠标从右往左拖）会导致 anchorOffset > focusOffset，需用 range.startOffset/range.endOffset 统一处理
• 若 selection.rangeCount === 0，常见原因是页面未聚焦、或选区在跨源