Text suchen und markieren mit JavaScript[IE|M|O|G]

von: Werner Zenk

Mit diesem JavaScript können Sie nach Text innerhalb einer Seite suchen, die gefundenen Textstellen werden dann farbig hervorgehoben.

Demo:

Suche über ein Formular:

Suche über einen Link:

suchen_und_markieren.php?suche=Alphabetdorf

„Weit hinten, hinter den Wortbergen, fern der Länder Vokalien und Konsonantien leben die Blindtexte. Abgeschieden wohnen Sie in Buchstabhausen an der Küste des Semantik, eines großen Sprachozeans. Ein kleines Bächlein namens Duden fließt durch ihren Ort und versorgt sie mit den nötigen Regelialien. Es ist ein paradiesmatisches Land, in dem einem gebratene Satzteile in den Mund fliegen.

Nicht einmal von der allmächtigen Interpunktion werden die Blindtexte beherrscht - ein geradezu unorthographisches Leben. Eines Tages aber beschloß eine kleine Zeile Blindtext, ihr Name war Lorem Ipsum, hinaus zu gehen in die weite Grammatik. Der große Oxmox riet ihr davon ab, da es dort wimmele von bösen Kommata, wilden Fragezeichen und hinterhältigen Semikoli, doch das Blindtextchen ließ sich nicht beirren. Es packte seine sieben Versalien, schob sich sein Initial in den Gürtel und machte sich auf den Weg.

Als es die ersten Hügel des Kursivgebirges erklommen hatte, warf es einen letzten Blick zurück auf die Skyline seiner Heimatstadt Buchstabhausen, die Headline von Alphabetdorf und die Subline seiner eigenen Straße, der Zeilengasse. Wehmütig lief ihm eine rethorische Frage über die Wange, dann setzte es seinen Weg fort. Unterwegs traf es eine Copy. Die Copy warnte das Blindtextchen, da, wo sie herkäme wäre sie zigmal umgeschrieben worden und alles, was von ihrem Ursprung noch übrig wäre, sei das Wort "und" und das Blindtextchen solle umkehren und wieder in sein eigenes, sicheres Land zurückkehren.

Doch alles Gutzureden konnte es nicht überzeugen und so dauerte es nicht lange, bis ihm ein paar heimtückische Werbetexter auflauerten, es mit Longe und Parole betrunken machten und es dann in ihre Agentur schleppten, wo sie es für ihre Projekte wieder und wieder mißbrauchten. Und wenn es nicht umgeschrieben wurde, dann benutzen Sie es immernoch.”

Quelltext:


<form method="get" action="">
 <input type="text" name="suche" value="Blindtext">
 <input type="submit" value="suchen">
</form>

Weit hinten, hinter den Wortbergen, fern der Länder ...

<script type="text/javascript">
// Text suchen und markieren
if (window.location.search != "") {
 var suche = window.location.search.split("=");
 var suchtext = unescape(suche[1]);
 var bodyTag = document.getElementsByTagName("body");
 for (var i = 0; i < bodyTag.length; ++i) {
  bodyTag[i].innerHTML = bodyTag[i].innerHTML.replace(new RegExp(suchtext, "gi"),
   "<span style=\"background: #FFFF00;\">" + suchtext + "<\/span>");
 }
}
</script>

Die JavaScript-Funktion durchsucht den Seiteninhalt der sich innerhalb des Body-Tags befindet.
Zu Beachten ist, das die JavaScript-Funktion erst nach dem Seiteninhalt der durchsucht werden soll eingebaut werden darf!

Und Ihre Meinung? Sie vermissen auf dieser Seite wichtige Informationen oder haben Hinweise für uns?

Kommentare: 8 » aufmachen Ralf: Nette Funtion, doch leider "sammelt" das Script die Ergebnisse und löscht diese alten nicht bei Neueingabe eines neuen Suchbegriffes. Sebastian: Beim Ersten mal klappt alles noch ganz gut. Sucht man jedoch beim Zweiten mal nach nur einem Buchstaben, der auch im <span>-Code vorkommt (etwa dem Buchstaben "s"), nimmt sich der Text selber auseinander und man die <span>-Tags der ersten Suche werden angezeigt.Desweiteren wäre es praktisch, wenn die Treffer der ersten Suche bei einer zweiten wieder demarkiert werden. Dafür konnte man einfach alle <span>-Tags in <p> durchgehen und die Hintergrundfarbe wieder entfernen. Werner: Der Fehler ist mir durchaus bekannt. Ich habe das Script inzwischen geändert, die Suchanfrage ist jetzt nur über GET möglich. Sebastian: Schon besser, jedoch kann man es nun auch PHP überlassen zu suchen und es ist zu beachten das das Suchwort immer als erster Parameter in der URL stehen muss, da sonst das Falsche Wort ausgelesen wird. Jörg: Genau das, was ich gesucht habe!Habe leider nur ein Problem:Ich benutze eine aus Excel exportierte Tabelle und habe dort den Code eingebaut. Mit Firefox funktioniert alles reibungslos. Nur dieser sch...öne I-Explorer markiert rein gar nichts. Diese Seite hier funktioniert hingegen bei beiden Browsern.Ich finde leider nichts, woran das liegen könnte. Vieleicht kann hier jemand helfen hoff Werner: Schau mal in den Quelltext dieser Seite(!) Ich habe dort im JavaScript nicht den Body-Tag verwendet sondern den P-Tag. Thorsten: Wenn ich die Suche nun anstelle im normalen Text in einer Tabelle durchführen lassen möchte, muss ich dann table-Tag statt Body-Tag schreiben? Werner: Ja, einfach im Script folgendes ersetzen: document.getElementsByTagName("table"); Dominik: Hallo, Ich habe ein Ploblem: Es findet bei Umlauten nichts. Liebe Grüße Dominik Werner: der Fehler mit den Umlauten wurde behoben - Vielen Dank! Alex: Hallo, würde es super finden wenn die Kleinigkeiten nicht sind. hat man zb ein Link der so aussieht auto.html und jemand sucht nach Auto ist der Link im A.... Man könnte es ja so machen (js ist nicht so mein ding) das alles was innerhalb von < und > (im Quelltext) steht nicht bearbeitet wird. Alex Joe: Leider ist das Skript noch nicht komplett richtig. Sucht man z.B. nach "we", werden alle Wörter richtig gefunden, auch jene, die mit "We" geschrieben werden. Allerdings wird der Text auch "unescaped" ausgegeben, das heißt, die markierten Suchbegriffen sind nun eventuell falsch geschrieben. Beispiel: Sucht man nach "We", findet man Wörter wie: "werden, weg, wenn". Allerdings werden diese nun alle groß geschrieben.
Hilfe finden Sie im » netzgemein.de - Forum. Auch als „Gast” können Sie dort Fragen stellen!