window.getSelection() 不提供 html 节点答案

【问题标题】：window.getSelection() doesn't give html nodeswindow.getSelection() 不提供 html 节点
【发布时间】：2025-11-25 17:55:01
【问题描述】：

这是我的页面来源：

<body>
<div>
    <p><span id="1">word</span> <span id="2">word</span> </p>
    <div><span id="3">word</span> <span id="4">word</span></div>
    <ul>
        <li><span id="5">word</span> <span id="6">word</span></li>
    </ul>
    </ul>
    <p><span id="7">word</span> <span id="8">word</span> <strong><span id="9">word</span></strong> </p>
</div>
</body>

我想突出显示（应用新类）用户选择的跨度并获取它的 ID。

我可以通过 window.getSelection() 获取用户选择的内容。但我不知道如何获取选定的文本节点。

提前致谢，洛根

【问题讨论】：

标签： javascript jquery getselection

【解决方案1】：

window.getSelection() 返回一个包含开始 (anchorNode) 和结束 (extentNode) 的 selection 对象 (ref)。因此，根据您提供的 HTML - 将 ID 修改为仅使用数字 (ref) - 这是一个 demo。单击任何单词，或选择一组单词，以查看它们获得“红色”类名称。

修改后的 HTML

<div>
    <p><span id="s1">word1</span> <span id="s2">word2</span> </p>
    <div><span id="s3">word3</span> <span id="s4">word4</span></div>
    <ul>
        <li><span id="s5">word5</span> <span id="s6">word6</span></li>
    </ul>
    <p><span id="s7">word7</span> <span id="s8">word8</span> <strong><span id="s9">word9</span></strong> </p>
</div>

脚本

$('div').bind('mouseup', function(){

    var i,
        s = window.getSelection(),
        // get ID of starting node
        start = parseInt((s.anchorNode.parentNode.id || '').substring(1), 10),
        // get ID of end node
        end = parseInt((s.extentNode.parentNode.id || '').substring(1), 10),
        // start gathering spans
        spans = $('#s' + start);

    // remove selected class
    $('span[id^=s]').removeClass('red');

    // add each span
    for (i = start; i <= end; i++) {
        spans = spans.add( $('#s' + i) );
    }

    // add selected class
    spans.addClass('red');

});

【讨论】：

在Firefox中，您需要将.extentNode更改为.focusNode。 jsfiddle.net/R7f4T/2