Wie erhalte ich den Start- und Endversatz einer Auswahl innerhalb ihres übergeordneten Containers?

Start- und Endoffsets eines Bereichs relativ zu seinem übergeordneten Container abrufen

In HTML-Dokumenten kann sich die Benutzerauswahl über verschiedene Elemente und Textknoten erstrecken . Es kann schwierig sein, den genauen Zeichenbereich im übergeordneten Container der Auswahl zu bestimmen. Wir können jedoch verschiedene Techniken nutzen, um dies unabhängig von Browservarianten zu erreichen.

Ein Ansatz besteht darin, den Auswahlbereich zu klonen und seine Endpunkte auf den Anfang und das Ende des übergeordneten Containers zu setzen. Durch den Vergleich der resultierenden Textinhalte mit dem ursprünglichen Auswahlbereich können wir den Start- und Endversatz relativ zum übergeordneten Text berechnen. Hier ist ein Beispiel in JavaScript:

function getSelectionCharacterOffsetWithin(element) {
  var start = 0;
  var end = 0;
  var preCaretRange = range.cloneRange();
  preCaretRange.selectNodeContents(element);
  preCaretRange.setEnd(range.startContainer, range.startOffset);
  start = preCaretRange.toString().length;
  preCaretRange.setEnd(range.endContainer, range.endOffset);
  end = preCaretRange.toString().length;
  return { start: start, end: end };
}

Diese Methode stellt sowohl den Start- als auch den Endoffset innerhalb des übergeordneten Containers bereit und berücksichtigt dabei HTML-Tags und Textknotendurchquerung. Es kann in einer Vielzahl von Anwendungen eingesetzt werden, die präzise Zeichenversätze erfordern, wie z. B. Textbearbeitungstools und Inhaltsbearbeitungsskripts.

Das obige ist der detaillierte Inhalt vonWie erhalte ich den Start- und Endversatz einer Auswahl innerhalb ihres übergeordneten Containers?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!