Range.extractContents 怎样移动选中的部分 DOM 内容

Range.extractContents() 可以把指定范围的 DOM 内容从源位置提取出来，返回一个 DocumentFragment；再把片段插入目标容器，就完成内容移动。范围切到元素内部时，部分父元素会以克隆外壳保留结构，因此不能把结果理解成“所有节点都原封不动搬家”。

接口文档：https://developer.mozilla.org/en-US/docs/Web/API/Range/extractContents

先用固定范围说明移动目标

在段落整理工具里，我更愿意先用可重复的固定范围解释提取行为，再接用户拖选。鼠标选区容易受点击和焦点变化影响，会把范围定义与移动本身混在一起。这个例子只处理“准备、强调文字、尾随文字”组成的一段内容，不扩展成完整富文本编辑器。

源段落显示“准备春季计划并归档”，其中“春季计划”被 em 包住。目标是把“计划并归”移到另一个容器，同时保留“计划”的强调结构。源段落应留下“准备春季档”，其中“春季”仍在 em 内。以下是原创完整片段，供浏览器中使用，本文没有执行或截图。

准备春季计划并归档

移动指定内容

把边界设在文本节点上

setStart 与 setEnd 接收节点和偏移。这里两端都是 Text 节点，偏移按 UTF-16 单元计；“春季计划”的 2 位于“计”之前，“并归档”的 2 位于“档”之前。若边界节点换成元素，偏移的含义就变成子节点位置，不能把同一个数字照搬过去。

代码刻意让段落内部没有排版换行，避免 lastChild 变成额外的空白文本。在真实页面中，不应依赖“最后一个节点一定是正文”这种演示约定；需要由编辑模型或明确的节点查找取得边界。表情等文本也可能跨多个 UTF-16 单元，业务中的显示字符位置需要先转换成正确偏移。

理解片段中的部分父元素

本例从 em 内部开始提取，因此源树保留含“春季”的残留 em，DocumentFragment 中则有包住“计划”的另一个 em，并带上“并归”文本。不要因为目标也出现 em 就认定整个原 em 被移动了。完全包含的节点与部分包含的祖先，处理方式不同。

appendChild(fragment) 会把片段的子节点放到目标中，片段容器本身不会变成一层 HTML 标签。若提取完只把返回值存在变量里，源内容已经改变，目标却还没有显示新内容；因此我会把“准备目标容器”和“执行提取”放在同一操作入口中考虑。

接入真实选区时保留操作边界

改为用户拖选时，先取得 Selection，确认存在非折叠范围，并确认两个边界都在允许编辑的源容器内。工具栏点击可能改变选区，应在合适的交互时机保存范围；保存后若源 DOM 已变化，还需要重新判断其适用性。cloneRange 也不是一份永远不随页面变化的内容快照。

真实内容中的 id、事件行为和业务状态也需要单独设计。部分祖先复制可能带来重复 id；不能假定所有被复制外壳都保留了原对象上的监听器。可以避免在可拆分的内联容器上放唯一标识，或由业务层在接入时处理标识与事件。

如果页面由 React、Vue 等框架管理，不要只移动真实 DOM 却让数据模型保持原样。下一次渲染可能按旧模型覆盖结果。这类场景更适合把范围解析成编辑操作，再由文档模型更新界面；直接 DOM 示例适用于由脚本明确管理的简单区域。

为什么不直接用 innerHTML 截字符串？

HTML 字符串下标并不等于 DOM 文本位置，容易切断标签或转义序列。Range 用节点与偏移表达边界，更适合这种局部结构操作。

同一组偏移可以连续移动吗？

不能默认可以。第一次提取会改变源树，所以本例禁用按钮，真实工具应按新内容重新建立下一次操作。

这能自动提供撤销吗？

不能把一次 DOM 提取当成完整撤销系统。需要保存与业务模型一致的操作记录及恢复位置，尤其要考虑文本节点被拆分后的结构。

这一做法最有价值的地方，是同时表达“部分文本”和“保留局部标记”；它的代价则是需要认真管理边界、源树变化和调用层状态。