Wörter im HTML Code markieren/hinterlegen

[Peter Mairhofer]

Hallo!

Gibt es mit JavaScript/DOM/... eine Möglichkeit alle Vorkommnisse eines bestimmten Wortes irgendwie zu markieren?

Ich würde das für eine Art selbstgebastelte Suche benötigen.

So in der Art: markword('Haus'); soll auf der ganzen Seite "Haus" markieren (z.B. blau unterlegen).

Das ganze braucht nur im IE zu funktionieren, jedoch ab Version 5.5

lg
Peter

[molily]

Hallo,

Gibt es mit JavaScript/DOM/... eine Möglichkeit alle Vorkommnisse eines bestimmten Wortes irgendwie zu markieren?

Danke dass du fragst. Darum wollte ich mich schon lange kümmern. ;)

Ein Fertigscript dafür kenne ich nicht (vielleicht gibt es eins, aber unter einer unfreien Lizenz), daher hatte ich mal einen Ansatz geschrieben:

http://forum.de.selfhtml.org/archiv/2004/9/t88864/
http://forum.de.selfhtml.org/archiv/2007/2/t146429/

Den habe ich jetzt ausgebaut:

http://molily.de/temp/highlight.html
http://molily.de/temp/highlighter1.js

Das ist auch kein Fertigscript, sondern ebenfalls ein Ansatz, wie du an den vielen auskommentierten Firebug-Ausgaben sehen kannst.

Einfache Anwendung:

var h = new Highlighter("Adorno");
h.traverse(document.body);

Erzeugt einen Highlighter mit dem Suchbegriff Adorno. Mit traverse wird er schließlich auf ein Element angewendet, hier der gesamte Dokumentkörper.

Es ginge natürlich auch
h.traverse(document.getElementById("content"));
und dergleichen. Mehrere Aufrufe sind nötig möglich. Nur auf dasselbe Element sollte man den Aufruf nicht öfters anwenden (kann man schon, dann greift eine Abfrage, die allerdings gerade auskommentiert ist, weil das Script dadurch nur länger läuft).

Eine Funktion zum »Rückgängigmachen« fehlt noch. Das ist nicht so trivial, man muss nach allen Elementen mit der Klasse suchen und sie durch ihren Kind-Textknoten ersetzen.

Dem Konstruktor kann man noch weitere Einstellungen übergeben, beispielsweise:

var h = new Highlighter("Adorno", "span", "highlight", true);

Fasst den Suchbegriff in ein span-Element mit der Klasse highlight ein (das ist Standard, wenn man diese Parameter weglässt) und sucht case-sensitive (Standard ist case-insensitive).

Ergänzungen und Korrekturen sind willkommen. Langfristig wäre das ein SELFHTML-Artikel wert.

Mathias

[molily]

Nachtrag:

Wenn du nach javascript highlight oder javascript search highlight suchst, findest du weitere Scripte. Die meisten arbeiten mit innerHTML, parsen also das HTML mit regulären Ausdrücken und schmieren darin herum. Bei meiner Lösung werden lediglich Textknoten durchlaufen und geändert, es ist also eine reine DOM-Lösung. Außerdem war mein Ziel, alle hinreichend fähigen Browser zu unterstützen. Möglicherweise gibt es eine einfachere, performantere Lösung speziell für den IE. Eine angepasste Lösung wollte ich für Browser schreiben, die DOM Traversal / TreeWalker unterstützen (highlighter2.js), aber dabei war kein signifikanter Performancegewinn zu beobachten.