如何获得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

这个问题是肯定的实现，而不是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] 
} 

其中如果选择是{之后}呈现块的内部的相关性标志为真。

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

Answer 2

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