如何在Javascript中获取整个div的范围偏移量？

Question

我使用以下方法基于用户选择创建一个范围：

var selection = window.getSelection();
var beginsAt = selection.getRangeAt(0).startOffset;
var endsAt = selection.getRangeAt(0).endOffset;
return [beginsAt,endsAt];

调用此函数的组件执行以下操作：

let before = text.substring(0, range[0]);
let highlighted = text.substring(range[0], range[1]);
let after = text.substring(range[1], text.length);
return(
        <div>
            {before}
            <span style={{
                backgroundColor: 'yellow'
            }}>
                {highlighted}
            </span>
            {after}
        </div>
)

每当我选择文本时，范围总是相对于高亮显示的跨度结束的位置。因此，如果我的文本在0到50之间，我选择范围[25,26]，然后选择范围[26,27]，而不是突出显示范围[26,27]，它突出显示范围[0,1]，因为范围是[0,1]相对于{after}生成的文本。

只要我突出显示{之前}渲染的任何文本，我就没有问题，只有当我突出显示{之后}部分渲染的内容时。

如何使这些范围值相对于整个文本的根，而不是相对于它们呈现的块？这是反应的限制还是我的实现？

Answer 1

问题肯定是与实现，而不是javascript或反应的限制（至少在这里提出的问题的方式）。

与其尝试强制索引符合父容器，不如简单地根据以前的选择来抵消它们。

获取选定内容的方法可以修改为包含以下内容：

(relativityFlag) => {
    var selection = window.getSelection();
    var beginsAt = selection.getRangeAt(0).startOffset;
    var endsAt = selection.getRangeAt(0).endOffset;

    if(relativityFlag){
        beginsAt += endsAt;
        endsAt += endsAt;
    }
    return [beginsAt, endsAt]
}

其中，如果选择位于{after}渲染块内，则相对性标志为真。

这是使索引符合更大范围的许多不同方法之一，但也是最简单的实现方法。

Answer 2

很可能会得到[0,1]，因为这是当前节点中的偏移量。您需要的是父节点中节点集合内的偏移量。我认为这个答案符合你的需要：https://stackoverflow.com/a/26477716/4650008