Mit Javascript nach einem bestimmten Wort im body suchen

[Mit Javascript nach einem bestimmten Wort im body suchen]

Hallo,

Ich bin gerade dabei, auf Wunsch, eine Homepage für unserer Pfarre zu gestalten. Dabei laufe ich auf ein Problem, das in keinem Forum wirklich beschrieben ist...

Unsere Ministrantenordnung ist irre lang (50 Zeilen) und ich möchte, dass man einen Namen in einem Edit Feld eingibt, und Javascript dann nach diesem eingegebenen Namen im gesamten Text sucht. Und dann jeden gefundenen Eintrag rot färbt.

Ich könnte jeden Namen in ein eigenes Textfeld packen, dann würde das theor. funktionieren, aber ich hoffe, das geht auch menschlicher...

Sollte so etwas sein, was man mit Strg+F aufmachen kann, nur eben, dass er das wort auch einfärbt.

Ist das möglich??

Bitte helft mir!!!!

Lg, Armin

[Micha]

Hallo Armin,

Ist das möglich??

Klar

Mit freundlichem Gruß
Micha

[Armin]

Hallo Micha,

Geht das nur in php oder kann ich das auch in html? Meine Php kentnisse sind leider bescheiden =(

Lg, Armin

[Micha]

Hallo Armin,

Geht das nur in php oder kann ich das auch in html?

Es geht nur in Verbindung mit HTML/CSS und einer Scriptsprache. Sowohl JavaScript als auch PHP sind möglich, wobei die Herangehensweise identisch ist. Suche das Wort im Kontext; Setze vor das Wort ein HTML-Tag; formatiere diesen mittels CSS.

Mit freundlichem Gruß
Micha

[Armin]

Hallo again,

ok, das system habe ich verstanden, aber eine frage hätte ich noch: den link, den du mir vorher gegeben hast, führt nur zu seiten, die das problem mit php lösen. Kennst du zufällig den javascript code? Javascript kann kann ich immerhin einbauen...

Lg, Armin

[Gernot Back]

Hallo Micha,

Es geht nur in Verbindung mit HTML/CSS und einer Scriptsprache. Sowohl JavaScript als auch PHP sind möglich, wobei die Herangehensweise identisch ist. Suche das Wort im Kontext; Setze vor das Wort ein HTML-Tag; formatiere diesen mittels CSS.

Wie du das mit JavaScript machst, würde mich auch interessieren, es ist ja nicht jedes Wort ein eigener Knoten im DOM-Baum. Du musst also die Textknoten eines jeden einzelnen Elements erst einmal auf das Vorhandensein der Zeichenkette hin überprüfen, zwischenspeichern, aus dem Mutterknoten herauslöschen, in entsprechend viele Teile splitten um sie dann wieder nacheinander (das zu markierende Wort mit umgebendem entsprechend über CSS zu gestaltendem SPAN-Element) an passender Stelle ins Dokument einzuhängen.

Das Skriptungetüm wird mindestens genauso heftig wie beim folgenden Problem, bei dem es darum ging, die passende Stelle zum Splitten eines Textknotens innerhalb eines Absatzes zu finden, damit ein Bild im Absatz bündig unten links erscheint.

http://forum.de.selfhtml.org/archiv/2007/6/t155286/#m1010844

Gruß Gernot

[Gernot Back]

Hallo nochmal,

ich überlege mir gerade, ob es mit dem selben Ansatz wie mit serverseitigen Techniken nicht auch geht, wenn man einen regulären Ausdruck auf das innerHTML des gesamten BODY-Elements anwendet. Je nachdem, was sich da für Nachfahrenselemente drin befinden, wäre ich mir aber nicht sicher, ob die dann alle noch "funktionieren". Bei einem mit Überschriften und Ansätzen formatierten "reinen" Textdokument könnte das aber klappen.

Gruß Gernot

[Micha]

Hallo Gernot Back,

ich überlege mir gerade, ob es mit dem selben Ansatz wie mit serverseitigen Techniken nicht auch geht, wenn man einen regulären Ausdruck auf das innerHTML des gesamten BODY-Elements anwendet.

An sowas dachte ich eigentlich. Ersetze alle Treffer durch <foo>bar</foo> im Zusammenspiel mit innerHTML. Merken sollte man sich jedoch den Originaltext, damit beim nächsten Suchbegriff der alte nicht mehr selektiert ist.

Mit freundlichem Gruß
Micha

[Alexander (HH)]

Hallo Micha,

Geht das nur in php oder kann ich das auch in html? Meine Php kentnisse sind leider bescheiden =(

Lg, Armin

HTML ist keine Programmiersprache, damit geht das leider nicht. Du kannst aber Javascript benutzen, um die Suche komplett auf dem Client auszuführen.

Einschränkungen: Der Browser muß Javascript können, Javascript muß eingeschaltet sein, und der Browser muß mit den benutzten Features umgehen können.

Ich würde es so angehen:

Per Javascript ein kleines Formular mit einem Eingabefeld in den DOM-Baum einbauen, so ist die Suche ohne ausreichend funktionsfähiges Javascript gar nicht zu sehen. Ein onclick-Handler für den Submit-Button ruft eine Javascript-Funktion auf, die die Liste durchsucht und für passende Listenelemente die className-Eigenschaft auf eine CSS-Klasse mit rotem Hintergrund ändert.

Grober Ansatz:

CSS: li.found { background:red; } li.notfound { /* nix */ }
HTML: <ul id="people"><li>Paulchen Panter</li><li>Bugs Bunny</li><li>Elmar Fudd</li></ul>

Den DOM-Node der Liste bekommst Du über document.getElementById("people"). Über dessen Kinder iterierst Du, wenn der Text des jeweiligen Kindes zum Suchstring paßt, setzt Du child[i].className="found", ansonsten child[i].className="notfound";

Ob der Text paßt, kannst Du mit einer RegExp testen, was aber vermutlich für Deinen Fall Overkill ist. Ein child[i].firstChild.nodeValue.toLowerCase().indexOf(suchstring.toLowerCase())>=0 sollte vollkommen ausreichend sein, wobei Du den Suchstring besser einmal außerhalb der Schleife "verkleinerst".

Siehe auch: SelfHTML -> Javascript -> Objekt-Referenz -> node.

Alexander