2009-11-29 4 views
5

Ist es möglich, Text in einem HTML-Dokument zu markieren, ohne es mit <span> oder einem anderen Tag zu umhüllen?Wie markieren Sie HTML-Text, ohne ihn mit Tags zu umhüllen?

Zum Beispiel möchte ich im HTML-Code <p>The quick fox</p>quick hervorheben, aber ohne ein DOM-Element um ihn hinzuzufügen. Das Hinzufügen eines DOM-Elements zu einem übergeordneten Element ist in Ordnung.

Danke!

+4

Warum möchten Sie das tun? – DOK

+1

Ich möchte (mit Begrenzungsrahmen) mehrere Suchelemente markieren. Stellen Sie sich jedoch die folgenden 2 Suchbegriffe vor: "Der schnelle" und "schnelle Fuchs". Wenn ich "The Quick" hervorhebe, indem ich es einpacke, wird es ein separater TEXT-Knoten und es würde es schwierig machen, "Quick Fox" zu finden. Eine Technik, die ich denke, ist: 1. Vorübergehend ein Element hinzufügen. 2. Suchen der Begrenzungsbox des Elements (mit offset(), width, height). 3. Löschen des obigen Elements. 4. Hinzufügen einer Box mit den obigen Abmessungen zum Container. Funktioniert möglicherweise, wenn der Text nicht umgebrochen wird ... – Sleepster

Antwort

8

Nein, das ist nicht möglich.

Sie können den Browser nicht anweisen, einen Text anders zu rendern, ohne das DOM zu ändern, unabhängig davon, ob Sie ihn statisch oder dynamisch ausführen (z. B. mit Javascript als Post-Processing-Schritt).

+1

Sie müssen das DOM nicht ändern, wenn Sie die Pixel in einem transparenten Canvas-Overlay ändern. –

+0

Wie erhalten Sie die absolute Position eines Textes, ohne das DOM zu ändern? –

+0

Fügen Sie dem DOM das Element hinzu, ermitteln Sie seine Position, löschen Sie es und normalisieren Sie(). – Sleepster

0

Es ist nicht möglich.

Wenn Sie nur keine Tags im ursprünglichen Quellcode möchten, können Sie möglicherweise Tags später mit Javascript Magie hinzufügen. Man könnte so etwas wie

<p highlight="quick">The quick fox</p> 

und schreiben Sie eine JQuery/Prototype/plain JS-Funktion markieren Sie es on the fly tun, aber was und warum? Wenn Sie ein wenig ausarbeiten, kann jemand eine Idee haben.

0

Die einzige Möglichkeit, dies zu tun, als ich mir vorstellen könnte, wäre, das <canvas> Element zu verwenden und absolut alles von Hand zu rendern.

1

Es ist möglich, wenn Sie ein absolut positioniertes Element mit einem transparenten sich wiederholenden Hintergrundbild oder einer transparenten Hintergrundfarbe (mit rgba oder hsla) verwenden und es über dem ausgewählten Bereich positionieren.

Eine andere Möglichkeit wäre ein absolut positioniertes Canvas-Element ohne Hintergrund, das den gesamten Browser-Darstellungsbereich einnimmt und ein transparentes Rechteck über die Auswahl zeichnet.

+0

Wie erhalten Sie die absolute Position eines Texts, ohne das DOM zu ändern? –

+0

Fügen Sie dem DOM das Element hinzu, ermitteln Sie seine Position, löschen Sie es anschließend und normalisieren Sie(). – Sleepster

Verwandte Themen