Ich möchte herausfinden können, welche DOM-Elemente in dem aktuell vom Benutzer im Browser ausgewählten Text vorhanden sind.
document.getSelection () würde uns den aktuell ausgewählten Text liefern. Aber wie können wir feststellen, welche DOM-Elemente in dieser Textauswahl enthalten sind?
window.getSelection() gibt Ihnen ein Objekt Auswahl . Verwenden Sie selection.rangeCount und selection.getRangeAt() , um ein Bereich -Objekt zu erhalten welche Auswahl Sie wollen.
Jetzt können Sie den ersten und letzten Knoten in der Auswahl von range.startContainer / startOffset und range.endContainer / endOffset erhalten. Sie könnten dann den Baum auf und ab gehen, um alle Elemente zwischen diesen beiden Positionen aufzunehmen, z. Verwenden Sie die Funktion getElementsBetweenTree() aus dies antwort .
Leider unterscheidet sich das TextRange -Modell von dem der W3- und HTML5-Standard und im Allgemeinen viel schlechter. Es gibt die Start- und Endpositionen nicht so leicht und nicht zuverlässig auf. Alles, was Sie erhalten, ist parentElement , um Ihnen den gemeinsamen Vorfahren zu nennen, und von da aus können Sie nur erraten, wo der Bereich auf der Erstellung eines neuen Bereichs basiert und moveToElementText und compareEndPoints mit dem Auswahlbereich aufrufen. Und wenn Sie die genaue Textauswahl wissen müssen, dann raten Sie, basierend auf moveStart / moveEnd den Bereich und Vergleich, was überhaupt keinen Spaß macht.
Tags und Links javascript dom browser