如何獲得Javascript中整個div的範圍偏移量？

我使用下面的方法基於用戶選擇創建範圍：如何獲得Javascript中整個div的範圍偏移量？

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}部分中呈現的內容時。

如何使這些範圍值相對於整個文本的根而不是相對於它們被渲染的塊？這是反應或我的實施的限制嗎？

來源

2016-09-17 FactorialTime

這個問題是肯定的實現，而不是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] 
}

其中如果選擇是{之後}呈現塊的內部的相關性標誌爲真。

這是使索引符合更大範圍但實現最簡單的許多不同方法之一。

來源

2016-09-20 01:54:14 FactorialTime

最有可能你得到[0,1]，因爲這是當前節點的偏移量。您需要的是父節點中的節點集合內的偏移量。我認爲這個答案有你所需要的：https://stackoverflow.com/a/26477716/4650008

來源

2016-09-18 03:30:52

這個實現肯定會工作，但我找到了一個更簡單的特定解決方案來適應我的問題。謝謝您的意見！ – FactorialTime

如何獲得Javascript中整個div的範圍偏移量？

回答

相關問題