如何在克隆节点上模拟选区？克隆节点选区丢失解决方法

当你克隆包含选区的节点时，原选区会丢失——因为选区是绑定到当前文档DOM树的，克隆节点是全新的DOM元素，无法直接继承原选区。要在克隆节点上重建选区，可按以下步骤操作：

1. 保存原选区的核心信息 #

先获取原选区的关键参数：起始/结束容器节点、对应偏移量，以及你要克隆的共同祖先节点：

const selection = window.getSelection();
const originalRange = selection.getRangeAt(0);
const originalNode = originalRange.commonAncestorContainer;

// 执行节点克隆
const cloneNode = originalNode.cloneNode(true);

2. 定位克隆节点中对应的选区容器 #

原选区的起始/结束节点是原节点的后代，需要在克隆节点里找到位置完全对应的节点，可通过以下辅助函数实现：

// 根据原节点找到克隆节点中对应的子节点
function findCorrespondingNode(originalNode, clonedRoot) {
  // 原节点就是克隆根节点，直接返回
  if (originalNode === clonedRoot) return clonedRoot;

  // 记录原节点相对于克隆根的路径（父节点链的索引）
  const path = [];
  let current = originalNode;
  while (current.parentNode !== clonedRoot) {
    const parent = current.parentNode;
    const index = Array.from(parent.children).indexOf(current);
    path.unshift(index);
    current = parent;
  }
  // 加上最后一步：克隆根节点的子节点索引
  path.unshift(Array.from(clonedRoot.children).indexOf(current));

  // 从克隆根出发，按路径找到目标节点
  let target = clonedRoot;
  for (const idx of path) {
    target = target.children[idx];
  }
  return target;
}

调用函数获取克隆节点中的选区起始/结束容器：

const clonedStartContainer = findCorrespondingNode(originalRange.startContainer, cloneNode);
const clonedEndContainer = findCorrespondingNode(originalRange.endContainer, cloneNode);

3. 绑定选区到克隆节点 #

浏览器的Selection对象只能作用于DOM树中的节点，所以需要先把克隆节点临时插入文档（用隐藏容器避免显示），再创建新Range并绑定到选区：

// 创建临时隐藏容器
const tempContainer = document.createElement('div');
tempContainer.style.display = 'none';
document.body.appendChild(tempContainer);
tempContainer.appendChild(cloneNode);

// 创建新Range并设置选区范围
const clonedRange = document.createRange();
clonedRange.setStart(clonedStartContainer, originalRange.startOffset);
clonedRange.setEnd(clonedEndContainer, originalRange.endOffset);

// 将Range添加到全局Selection
const clonedSelection = window.getSelection();
clonedSelection.removeAllRanges();
clonedSelection.addRange(clonedRange);

4. 获取克隆节点的选区 #

• 如果克隆节点仍在DOM中，可直接通过window.getSelection()获取当前选区，但注意这是全局选区，会覆盖其他选区。
• 更可靠的方式是直接保存创建的clonedRange对象，它包含了选区的所有位置信息，即使克隆节点被移除DOM，之后重新插入时可再次将其添加到Selection。

内容的提问来源于stack exchange，提问作者Lerner Zhang