Texthighlight mit jQuery

Zugriffe: 3535 starstarstarstarstarstarstarstarstarstar Bewertung:2,75 (4 Bewertungen) 19.04.2009

Johann Burkhard hat ein interessantes jQuery-Plugin entwickelt und unter der MIT-License veröffentlicht, mit dem es möglich ist, bestimmte Textpassagen farblich hervorzuheben. Anwendungsgebiete gibt es hierzu reichlich, ich denke dabei nur an die Suchfunktion auf einer Webseite. Häufig werden mehrere Fundstellen zur formulierten Suchanfrage ausgeben, doch verliert man den Überblick und bei mancher Fundstelle fragt man sich, "was hatte das mit meiner Anfrage zu tun gehabt". In solchen Fällen ist es hilfreich für den Suchenden, wenn seine Anfrage in der Fundstelle farblich hervorgehoben wird.

Die Implementierung ist dabei - wie fast immer bei jQuery-Plugins - denkbar einfach:

Man fügt zunächst die Javascriptdatei seinem Projekt und resp. seiner Webseite hinzu. Dann erfolgt die Auswahl des Containers innerhalb dessen die Textmarkierung erfolgen soll. Auf diese Auswahl ruft man die Methode  highlight auf und über gibt den zu markierenden Text als Argument.

Ich habe dieses Plugin in diesem Blog implementiert. Wer also die praktische Seite sich ansehen möchte, benutze hier einfach die Suche.

Einzig im Plugin habe ich eine kleine Ergänzung vornehmen müssen, nämlich wenn ein Leerstring als Argument übergeben wird. Für diesen Fall muss die Methode verlassen werden. So habe ich im Plugin folgende Zeile hinzugefügt:

jQuery.fn.highlight = function(pat) {
    if (pat == "") { return this; }
...

Und zu guter Letzt: es funktioniert in allen Browsern, die jQuery unterstützen.


Neuen Kommentar verfassen

Bestätigungscode