javascript - 在 标签中获取选定的文本和文本索引，其中偏移量是 pre 的开始

Question

所以我有一个像这样的前置标签:

<pre> Some content, more content. <span>Coloured content</span>. Some more content</pre>

我想做的是使用绑定(bind) mouseup 事件的 javascript 或 jquery 设置一个事件。当用户选择文本时，我想从 pre 的开头获取索引偏移量，因此它会忽略 span 标签。因此，如果有人选择了 span 标签之后的文本，它就知道要从开始前偏移。

我有办法做到这一点吗？看起来 window.getSelection 在 span 标签之后启动它。

Answer 1

给定这个 HTML

<pre>0<span>1</span>23<span>4<span>56<span><span>7</span></span>8</span></span></pre>

您想将第一个选定的数字作为输出/偏移量，对吗？基本思想是在 DOM 树中向左导航，直到不再有具有相同父节点的节点为止。然后往上爬，终于到了pre标签。在向左上角浏览树的同时，对访问元素的所有字符进行计数并将其添加到最终结果中。

$('pre').on('mouseup', function(){
    var selection = window.getSelection();
    // Get the offset within the container that holds all of the selection
    var offset = selection.anchorOffset;
    // A reference to the currently examined node
    var currentNode = selection.anchorNode;
    // Wander around until we hit the pre
    while(currentNode!==this){
        if(currentNode.previousSibling){
            // If there is a node left of us (with the same parent) navigate to the left and sum up the text length in the left node.
            // There is no need to check the children (possibly existent) since these would be included in text's return value
            offset = offset + $(currentNode.previousSibling).text().length;
            // Navigate to the left node of the current
            currentNode = currentNode.previousSibling;
        } else {
            // There is no left node so climb up towards the pre tag
            currentNode = currentNode.parentNode;
        }
    }
    // Print the final result
    console.log(offset);
});

脚本应该输出所需的数字。因此，如果您选择 78，您将获得 7 作为输出。

我只在 Firefox 中测试了这段代码。如果其他浏览器实现了 HTML Editing API，它们应该也能正常工作。 . IE不支持until version 9 .这同样适用于 getSelection(参见 MSDN)。