如何用JS获取选中文本所在的HTML标签？

要获取选中文本的直接父标签名，核心问题是原代码中commonAncestorContainer返回的是包含整个选区的最外层共同祖先元素，而非直接包裹选中内容的元素。以下是修正后的实现：

修正代码 #

const userSelection = window.getSelection();
if (userSelection.rangeCount === 0) return; // 无选中内容时直接退出

const selectedTextRange = userSelection.getRangeAt(0);
let targetElement;

// 处理选区起始容器：若为文本节点，取其父元素（文本节点无tagName）
const startContainer = selectedTextRange.startContainer.nodeType === Node.TEXT_NODE 
  ? selectedTextRange.startContainer.parentNode 
  : selectedTextRange.startContainer;

// 判断选区是否完全在起始容器内部
if (selectedTextRange.commonAncestorContainer === startContainer || 
    (selectedTextRange.commonAncestorContainer.nodeType === Node.TEXT_NODE && 
     selectedTextRange.commonAncestorContainer.parentNode === startContainer)) {
  targetElement = startContainer;
} else {
  // 若选区跨多个元素，此处可根据需求调整（示例取起始元素）
  targetElement = startContainer;
}

// 标签名默认大写，转小写后对比避免大小写问题
if (targetElement.tagName.toLowerCase() === 'strong') {
  console.log("选中内容的父标签是strong");
  targetElement.replaceWith(targetElement.innerHTML);
} else {
  const strongElement = document.createElement("strong");
  try {
    selectedTextRange.surroundContents(strongElement);
  } catch (e) {
    // 跨元素选区无法使用surroundContents，需做兼容处理
    console.error("无法包裹跨元素选区：", e);
  }
}

关键说明 #

1. 区分文本节点与元素节点：选区的startContainer通常是文本节点（比如示例中的dolor文本），必须通过parentNode获取其包裹元素。
2. 精准定位直接父元素：通过判断选区是否完全包含在起始容器内，确保拿到的是直接包裹选中内容的元素，而非外层祖先。
3. 处理跨元素选区异常：如果选中的文本跨越多个标签，surroundContents会抛出错误，需要添加异常捕获逻辑。

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