Wie bekomme ich die Bereichsoffsets eines gesamten div in Javascript?

Question

ich eine Reihe basierend auf einer Benutzerauswahl erschaffe die folgende Methode:

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

Die Komponente, die diese Funktion hat die folgende ruft:

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> 
) 

Immer, wenn ich meinen Text wählen, ist der Bereich immer relativ zum Endpunkt des markierten Bereichs. Wenn mein Text also in einem Bereich zwischen 0 und 50 liegt und ich den Bereich [25,26] auswähle, dann wähle den Bereich [26,27], anstatt den Bereich [26,27] hervorzuheben, er hebt den Bereich von [0 hervor, 1] weil der Bereich [0,1] relativ zu dem von {nach} erzeugten Text war.

Solange ich einen Text hervorhebe, der von {vorher} gerendert wurde, habe ich keine Probleme, nur wenn ich etwas hervorhebe, das im Abschnitt {after} gerendert wurde.

Wie kann ich diese Bereichswerte relativ zum Stamm des gesamten Textes und nicht relativ zu den Blöcken machen, in denen sie gerendert werden? Ist das eine Einschränkung der Reaktion oder meiner Umsetzung?

Answer 1

Das Problem ist sicherlich mit der Implementierung und keine Einschränkung von Javascript oder reagieren (zumindest in der Art, dass diese Frage hier vorgeschlagen wird).

Anstatt zu versuchen, die Indizes zu einem übergeordneten Container zu zwingen, ist es viel einfacher, sie einfach basierend auf einer vorherigen Auswahl zu versetzen.

(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] 
} 

Wo die Relativität Flag wahr ist, wenn die Auswahl innerhalb der {} ist, nachdem Block Render:

Die Methode, die die Selektion bekommt kann folgendes enthalten modifiziert werden.

Dies ist eine von vielen verschiedenen Möglichkeiten, den Index einem größeren Bereich anzupassen, ist aber am einfachsten zu implementieren.

Answer 2

Höchstwahrscheinlich erhalten Sie [0,1], weil das der Offset im aktuellen Knoten ist. Was Sie brauchen, ist der Offset innerhalb der Sammlung von Knoten im Elternknoten. Ich denke, diese Antwort hat, was Sie brauchen: https://stackoverflow.com/a/26477716/4650008