如何移除选中文本并保留空HTML标签？

要实现移除浏览器选中区域内的文本但保留HTML标签，核心是遍历选区覆盖的所有节点，针对文本节点和元素节点分别处理，同时兼容跨层级节点的场景。以下是具体实现步骤和代码：

核心实现函数 #

1. 辅助函数：清空元素内所有文本节点 #

递归遍历元素的子节点，仅清空文本内容，完全保留元素标签结构。

function clearElementText(element) {
  const childNodes = Array.from(element.childNodes);
  childNodes.forEach(node => {
    if (node.nodeType === Node.TEXT_NODE) {
      node.textContent = '';
    } else if (node.nodeType === Node.ELEMENT_NODE) {
      clearElementText(node);
    }
  });
}

2. 处理起始节点 #

针对选区的起始边界，保留起始偏移前的内容（文本节点），或处理元素节点中起始偏移后的子节点：

function handleStartNode(range) {
  const startNode = range.startContainer;
  const startOffset = range.startOffset;

  if (startNode.nodeType === Node.TEXT_NODE) {
    // 文本节点：保留前startOffset长度的内容，剩余部分清空
    startNode.textContent = startNode.textContent.slice(0, startOffset);
  } else if (startNode.nodeType === Node.ELEMENT_NODE) {
    // 元素节点：遍历起始偏移后的子节点，清空所有文本
    const children = Array.from(startNode.childNodes);
    for (let i = startOffset; i < children.length; i++) {
      const child = children[i];
      if (child.nodeType === Node.TEXT_NODE) {
        child.textContent = '';
      } else {
        clearElementText(child);
      }
    }
  }
}

3. 处理结束节点 #

针对选区的结束边界，保留结束偏移后的内容（文本节点），或处理元素节点中结束偏移前的子节点：

function handleEndNode(range) {
  const endNode = range.endContainer;
  const endOffset = range.endOffset;

  if (endNode.nodeType === Node.TEXT_NODE) {
    // 文本节点：保留从endOffset开始的内容，前面部分清空
    endNode.textContent = endNode.textContent.slice(endOffset);
  } else if (endNode.nodeType === Node.ELEMENT_NODE) {
    // 元素节点：遍历结束偏移前的子节点，清空所有文本
    const children = Array.from(endNode.childNodes);
    for (let i = 0; i < endOffset; i++) {
      const child = children[i];
      if (child.nodeType === Node.TEXT_NODE) {
        child.textContent = '';
      } else {
        clearElementText(child);
      }
    }
  }
}

4. 处理中间节点 #

遍历起始节点和结束节点之间的所有兄弟节点（包括跨层级的父节点兄弟），清空这些节点内的所有文本：

function handleMiddleNodes(range) {
  let currentNode = range.startContainer.nextSibling;
  const endNode = range.endContainer;

  // 处理起始节点所在父节点的后续兄弟
  while (currentNode && currentNode !== endNode.parentNode) {
    if (currentNode.nodeType === Node.ELEMENT_NODE) {
      clearElementText(currentNode);
    } else if (currentNode.nodeType === Node.TEXT_NODE) {
      currentNode.textContent = '';
    }
    currentNode = currentNode.nextSibling;
  }

  // 处理父节点链上的中间节点
  let startParent = range.startContainer.parentNode;
  let endParent = range.endContainer.parentNode;

  while (startParent !== endParent) {
    // 处理起始父节点的后续兄弟
    let sibling = startParent.nextSibling;
    while (sibling) {
      if (sibling.nodeType === Node.ELEMENT_NODE) {
        clearElementText(sibling);
      } else if (sibling.nodeType === Node.TEXT_NODE) {
        sibling.textContent = '';
      }
      sibling = sibling.nextSibling;
    }
    startParent = startParent.parentNode;

    // 处理结束父节点的前置兄弟
    sibling = endParent.previousSibling;
    while (sibling) {
      if (sibling.nodeType === Node.ELEMENT_NODE) {
        clearElementText(sibling);
      } else if (sibling.nodeType === Node.TEXT_NODE) {
        sibling.textContent = '';
      }
      sibling = sibling.previousSibling;
    }
    endParent = endParent.parentNode;
  }

  // 处理共同父节点中，起始父节点到结束父节点之间的兄弟
  if (startParent === endParent) {
    let sibling = range.startContainer.parentNode.nextSibling;
    while (sibling && sibling !== range.endContainer.parentNode) {
      if (sibling.nodeType === Node.ELEMENT_NODE) {
        clearElementText(sibling);
      } else if (sibling.nodeType === Node.TEXT_NODE) {
        sibling.textContent = '';
      }
      sibling = sibling.nextSibling;
    }
  }
}

5. 主函数：整合所有逻辑 #

调用上述函数完成选区文本清除操作，同时避免修改原选区状态：

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

  // 克隆选区范围，防止操作时影响原选区
  const clonedRange = selection.getRangeAt(0).cloneRange();

  handleStartNode(clonedRange);
  handleEndNode(clonedRange);
  handleMiddleNodes(clonedRange);

  // 清除选区
  selection.removeAllRanges();
}

使用方式 #

将函数绑定到触发事件即可，比如按钮点击：

document.getElementById('clear-btn').addEventListener('click', clearSelectedTextPreserveTags);

说明 #

• 支持跨多层嵌套元素的选区处理，无论起始和结束节点是否同级，都能准确清空选中区域内的文本并保留标签结构。
• 操作时克隆原选区范围，避免修改过程中干扰原选区状态。

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