Erhalte sichtbaren Text in CSS3-Spalten
Versuchen, eine Methode zu erstellen, die den aktuellen sichtbaren Text innerhalb eines Elements lesen kann. Die Methode, die Sie unten sehen, ist so weit wie ich die letzten Tage bekommen habe.
Gibt es etwas, das zuverlässiger ist, um den sichtbaren Text in einem anderen Element als einem Caret / Bereich zu erhalten? Das Problem, das ich habe, ist, dass ich viel überflogenen Text habe, der dann auch ausgewählt wird, weil caret nicht den textNode, sondern den übergeordneten Container abfängt.
Ein Beispiel dafür, wie meine Seite aussieht & amp; Warum habe ich Probleme mit der aktuellen Methode:
- Ab sofort hat Gael die leistungsfähigste Lösung & amp; am einfachsten zu implementieren.
Nicht sicher, dass ich hier einen Sinn habe, sonst lass es mich wissen:)
2 Antworten
Weltweit müssen Sie jeden Buchstaben testen, um zu wissen, ob er sichtbar ist. Da ein Block Container teilweise sichtbar sein kann, und im Wissen, welche Teile seines Inhalts sichtbar ist, impliziert sie, sie separat zu testen, bis zu einem Buchstaben Granularität Anstatt jedoch jeden Buchstaben zu testen, können Sie testen, ob eine Gruppe von Buchstaben sichtbar ist, und eine binäre Suchmethode , reduzieren Sie sie genau so, wie es notwendig ist zu wissen, ob alle enthaltenen Buchstaben sichtbar sind oder nicht.
der erste Ansatz
Die Position, die Dimension (zB das Bounding Rect) eines textNode ist nicht in seinen Eigenschaften.
Also habe ich anfangs versucht, textNodes in ein Block-Element einzufügen, aber das hat Performance-Probleme verursacht, da das Ändern des DOM Reflow-Operationen impliziert.
Darüber hinaus müssen wir nicht nur feststellen, ob ein Textknoten sichtbar ist, sondern für alle seine Buchstaben. Also lege ich jeden Buchstaben in ein Blockelement:
%Vor%Für einen Text, der nur 10000 Buchstaben enthält, war die Bearbeitungsdauer ungefähr 10s.
die Bereichsschnittstelle
Die Verwendung von Bereichen , um die Position eines Buchstabensatzes zu erhalten, scheint ein besserer Ansatz zu sein , da wir nicht in den DOM-Baum einbrechen müssen.
Ein Bereich ist anfänglich so definiert, dass er den gesamten Text enthält:
%Vor% dann, als range hat die gleichen getBoundingClientRect Methoden wie a Container blockieren, können wir testen, ob es einen Schnittpunkt mit den Fenstergrenzen gibt:
Dies gibt an, wie ein Bereich sichtbar ist: vollständig, teilweise, auf keiner:
%Vor%Wenn ein Bereich teilweise sichtbar ist, wird er in zwei Teilmengen aufgeteilt, die dann getestet werden, um Teilmengen zu erhalten, die sichtbar oder nicht, aber nicht teilweise sind.
%Vor%Bei gleichem Text liegt die Verarbeitungsdauer in der Größenordnung von zehn Millisekunden. Und die Komplexität wächst nicht besonders mit der Textlänge.
Der vollständige Code lautet hier
einige Einschränkungen
Es wird nur sichtbarer Text von einem textNode angezeigt, aber dieselbe Logik der binären Suche könnte auch auf einen DOM-Baum angewendet werden.
Alle sichtbaren Bereiche werden am Ende des Prozesses zusammengeführt; das könnte ein Problem sein, da nicht benachbarte Zeilen verkettet werden könnten.
Wie ich hier denke, versuchen Sie, das DOM zu parsen und alle Elemente Text zu bekommen Wenn Sie Folgendes betrachten: jQuery.parseHTML ()
und sehen Sie sich die Eigenschaften des DOM-Elements an DOM-Element
Sehen Sie sich das Beispiel an, um den Textwert abzurufen DOM-Element-tetxt-Wert
Wenn Sie Ihren HTML-Code veröffentlichen, erhalten Sie eine bessere Hilfe
Ich hoffe, das kann helfen
Tags und Links javascript css3