javascript - HTML - 如何使用相对于 HTML 标签的选择偏移量

Question

假设我的 HTML 看起来像这样

<div>
    <p> start<span>span</span>end </p>
</div>

我需要能够在进行选择时获得偏移量，而不忽略跨度标签。

例如假设用户选择

t<span>span</span>e

我希望得到 4 作为起始偏移量和 24 作为结束偏移量。通过 window.getSelection() 获得的选择对象返回 1,8，这对我来说相当无用。我显然需要处理用户只选择内部跨度或部分跨度等的所有情况。

谢谢

Answer 1

我最终解决了它：

            var range = sel.getRangeAt(0);
            // inserts two spans at the beginning and end of the range, to
            // calculate the offsets
            var div = document.createElement("span");
            div.setAttribute("class", START_NODE);
            range.insertNode(div);
            range.collapse(false);
            div = document.createElement("span");
            div.setAttribute("class", END_NODE);
            range.insertNode(div);
            // gets the offsets by looking up the location of the inserted spans
            // removes them after finding the offsets (also so the starting
            // offset won't screw up the ending offset)
            comment.startOffset = p.html().indexOf('<span class="' + START_NODE + '">');
            $("." + START_NODE).remove();
            comment.endOffset = p.html().indexOf('<span class="' + END_NODE + '">');
            $("." + END_NODE).remove();
            p.html(p.html());

基本上，我在范围选择的开头添加了一个 SPAN，然后折叠范围并在其末尾添加了一个 SPAN。然后我简单地搜索了我添加的第一个跨度的索引，以及我添加的第二个跨度的索引来查找偏移量。