如何判断DOM节点是否可被单层包裹？基于Range.surroundContents()

要实现仅对单个完整DOM节点执行包裹，你需要先通过Range的属性判断选中范围是否符合要求，再调用surroundContents()。核心是验证两个关键条件：

关键判断条件 #

• 选中的是某个节点的全部内容（不是节点的一部分）
• 选中范围内没有多个同级节点（即只包含一个独立节点）

具体实现代码 #

function wrapSingleNode() {
  const selection = window.getSelection();
  if (selection.rangeCount === 0) return;

  const range = selection.getRangeAt(0);
  let targetNode;

  // 条件1：判断是否选中了整个节点（而非节点的一部分）
  if (range.startContainer === range.endContainer) {
    // 处理元素节点：startOffset为0，endOffset等于子节点总数
    if (range.startContainer.nodeType === Node.ELEMENT_NODE) {
      if (range.startOffset === 0 && range.endOffset === range.startContainer.childNodes.length) {
        targetNode = range.startContainer;
      }
    } 
    // 处理文本节点：startOffset为0，endOffset等于文本长度
    else if (range.startContainer.nodeType === Node.TEXT_NODE) {
      if (range.startOffset === 0 && range.endOffset === range.startContainer.length) {
        targetNode = range.startContainer.parentNode;
      }
    }
  }

  // 条件2：判断目标节点是否是commonAncestorContainer的唯一选中子节点
  if (targetNode && targetNode.parentNode === range.commonAncestorContainer) {
    const childNodes = Array.from(targetNode.parentNode.childNodes);
    const selectedChildren = childNodes.filter(node => 
      range.intersectsNode(node)
    );
    if (selectedChildren.length === 1) {
      // 创建包裹元素
      const wrapper = document.createElement('span');
      wrapper.setAttribute('my-attribute', 'test');
      // 执行包裹
      range.surroundContents(wrapper);
      // 恢复选中状态
      selection.removeAllRanges();
      selection.addRange(range);
    }
  }
}

代码逻辑解释 #

1. 选中完整性判断：通过startContainer和endContainer是否一致，再结合startOffset和endOffset的值，确认选中的是整个节点——元素节点要覆盖所有子节点，文本节点要覆盖全部文本。
2. 同级节点检查：利用commonAncestorContainer获取选中内容的共同父节点，筛选出该父节点下被Range覆盖的子节点，如果数量为1，说明没有选中同级节点，符合要求。
3. 包裹执行：符合条件后创建包裹元素，调用surroundContents()完成包裹，最后恢复选中状态避免丢失选区。

注意事项 #

• surroundContents()要求Range不能跨节点的部分内容，所以必须确保选中的是完整节点，否则会抛出错误，这也是为什么要先做完整性判断。
• 对于文本节点，我们最终包裹的是它的父元素（因为文本节点本身不能作为容器被包裹后保留结构）。

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