如何在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]因为相对于{after}生成的文本，范围是[0,1]。

只要我突出显示由{before}呈现的任何文本，我就没有问题，只有当我突出显示{after}部分中呈现的内容时才会出现问题。

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

Answer 1

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

Answer 2

问题肯定在于实现，而不是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}渲染块内，则相对性标志为真。

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