contenteditable段落含span时window.getSelection()获取Range范围错误求助

当选中无样式的contenteditable段落文本时，可正常获取Range的start与end值（如start: 0, end: 23）；但当段落内包含带font-weight:bold样式的<span>元素（如“common”被包裹）时，获取的end值错误（显示为7，实际应为23）。

当前使用的处理函数代码如下：

handleMouseUp(event) {
  const selection = window.getSelection()

  const start = selection.anchorOffset
  const end = selection.focusOffset

  if (start >= 0 && end >= 0) {
    this.curSelection = {
      start, end
    }
  }
}

问题根源是anchorOffset和focusOffset仅返回选中范围相对于当前选中的文本节点（比如被<span>包裹的片段）的局部偏移量，而非整个contenteditable段落的全局偏移量。要获取正确的全局位置，需要遍历段落内的所有文本节点累计字符数：

handleMouseUp(event) {
  const selection = window.getSelection();
  if (!selection.rangeCount) return;

  const range = selection.getRangeAt(0);
  const editableElement = event.target.closest('[contenteditable]');
  if (!editableElement) return;

  // 计算选中起始点的全局偏移
  const startOffset = calculateGlobalOffset(editableElement, range.startContainer, range.startOffset);
  // 计算选中结束点的全局偏移
  const endOffset = calculateGlobalOffset(editableElement, range.endContainer, range.endOffset);

  // 处理反向选中的情况，确保start <= end
  this.curSelection = {
    start: Math.min(startOffset, endOffset),
    end: Math.max(startOffset, endOffset)
  };
}

// 辅助函数：计算目标文本节点的偏移相对于父元素的全局位置
function calculateGlobalOffset(parentElement, targetNode, targetOffset) {
  let totalOffset = 0;
  // 创建TreeWalker遍历所有文本节点
  const textWalker = document.createTreeWalker(
    parentElement,
    NodeFilter.SHOW_TEXT,
    null,
    false
  );

  let currentTextNode;
  while ((currentTextNode = textWalker.nextNode())) {
    if (currentTextNode === targetNode) {
      totalOffset += targetOffset;
      break;
    }
    totalOffset += currentTextNode.textContent.length;
  }
  return totalOffset;
}

关键说明 #

1. TreeWalker遍历：通过document.createTreeWalker精准遍历contenteditable元素下的所有文本节点，跳过非文本元素的干扰
2. 累计字符长度：逐个累加每个文本节点的字符数，直到找到选中范围对应的节点，再加上节点内的局部偏移，得到全局位置
3. 反向选中处理：用Math.min和Math.max保证start始终小于等于end，兼容从右往左选的操作场景

这样无论文本是否被嵌套的样式元素包裹，都能得到相对于整个段落的正确选中偏移值。

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