可编辑内容区选中文本添加span标签时如何避免HTML嵌套问题

核心逻辑是先判断选中内容是否处于.word类的span标签内：

• 若不在，直接给选中内容包裹.word span
• 若在，先将原有父级span拆分为「选中前内容」「选中内容」「选中后内容」三个片段，每个非空片段都单独包裹.word span，替换原有父span即可避免嵌套

完整实现代码如下：

function highlightSelection() {
  if (!window.getSelection) return;
  const sel = window.getSelection();
  if (sel.rangeCount === 0) return;

  const range = sel.getRangeAt(0).cloneRange();
  // 向上查找最近的带word类的父span
  let parentEl = sel.anchorNode.parentElement;
  let targetParentSpan = null;
  while (parentEl) {
    if (parentEl.tagName === 'SPAN' && parentEl.classList.contains('word')) {
      targetParentSpan = parentEl;
      break;
    }
    parentEl = parentEl.parentElement;
  }

  // 场景1：选区不在已有的word span内，直接包裹
  if (!targetParentSpan) {
    const newSpan = document.createElement('span');
    newSpan.classList.add('word');
    range.surroundContents(newSpan);
    sel.removeAllRanges();
    sel.addRange(range);
    return;
  }

  // 场景2：选区在已有的word span内，拆分原span
  const fullText = targetParentSpan.textContent;
  // 计算选区相对于原span文本的起止偏移
  const relativeStart = range.startOffset;
  const relativeEnd = range.endOffset;

  const preText = fullText.slice(0, relativeStart);
  const selectedText = fullText.slice(relativeStart, relativeEnd);
  const postText = fullText.slice(relativeEnd);

  // 生成替换节点片段
  const fragment = document.createDocumentFragment();
  // 前半部分非空则生成独立span
  if (preText.trim()) {
    const preSpan = document.createElement('span');
    preSpan.classList.add('word');
    preSpan.textContent = preText;
    fragment.appendChild(preSpan);
  }
  // 选中部分生成独立span
  const selectedSpan = document.createElement('span');
  selectedSpan.classList.add('word');
  selectedSpan.textContent = selectedText;
  fragment.appendChild(selectedSpan);
  // 后半部分非空则生成独立span
  if (postText.trim()) {
    const postSpan = document.createElement('span');
    postSpan.classList.add('word');
    postSpan.textContent = postText;
    fragment.appendChild(postSpan);
  }

  // 替换原有父span
  targetParentSpan.parentNode.replaceChild(fragment, targetParentSpan);

  // 恢复选中状态
  const newRange = document.createRange();
  newRange.selectNode(selectedSpan);
  sel.removeAllRanges();
  sel.addRange(newRange);
}

以上代码完全覆盖你提到的两种场景，不会出现嵌套问题。如果需要兼容跨元素选区的场景，可以额外扩展范围判断逻辑即可。

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