Javascript中选定文本的节点名称答案

【问题标题】：nodeName for selected text in JavascriptJavascript中选定文本的节点名称
【发布时间】：2011-04-16 18:58:26
【问题描述】：

我的 HTML 看起来像这样：

<span id="text">
 <span class="segment" id="first">some text</span>
 <span class="segment" id="sec">bla bla</span>
</span>

当用户选择某些东西时，我想确定他选择了哪些元素。例如，如果用户选择了“text bl”，我需要“first”和“sec”元素。

为此，我尝试使用 endContainer.nodeName，但对于每个选定的文本，我都会得到父元素“文本”。是否可以获取子元素？

var selObj = window.getSelection();
    var selRange = selObj.getRangeAt(0);
    if(selRange!="") {
    var startName = selRange.startContainer.nodeName;
    var endName = selRange.endContainer.nodeName;
    alert(startName+" "+endName);
    }

【问题讨论】：

标签： javascript getselection selectedtext

【解决方案1】：

在您的示例中，问题在于选择的开始和结束容器节点是文本节点。您可以通过检查nodeType 属性来获取容器元素：

var startNode = selRange.startContainer;
if (startNode.nodeType == 3) { // 3 is the node type for text nodes
    startNode = startNode.parentNode;
}

... 和结束容器类似。

【讨论】：