Tutorial Text einer Seite durchsuchen mittels JavaScript - von Webbausteine.de - hier abgewandelt für NOF

Formular

Für das Formular-Feld zur Suche von Begriffen zieht Ihr Euch einen Layoutbereich auf, hakt diesen als “Formular” an und fügt ein Eingabefeld ein.

Markiert das Eingabefeld und klickt im Fenster “Eingabefeld-Eigenschaften” auf den 2. Button von links. Wählt bei Methode > “Empfangen”.

Klickt nun auf den ersten Button oben im Fenster “Eingabefeld-Eigenschaften” und auf den Button “HTML”. Kommentiert den gesamten Code von NOF aus, sodass dieser nicht mehr vom Browser verarbeitet wird. Anstelle dessen fügt Ihr nun “vorher” den Code unten ein. Guckt Euch zum besseren Verständnis der HTML5 Attribute diese Seite an.

Hier wird durch das HTML5 Attribut pattern die Eingabe von A-Z, a-z, 0-9 und Sonderzeichen auf mindestens 3 und höchstens 50 Zeichen abgefragt.

<input type="text" name="suche" placeholder="Text durchsuchen" required pattern="[A-Za-z0-9äöüéÄÖÜÉß-]{3,50}" title="Nur Buchstaben und
 Zahlen (mindestens 3, maximal 50)"><span style="margin-left:5px"><input type="submit" value="suchen"></span>

JavaScript

Nun fügt Ihr das JavaScript unten in den HTML-Code Editor eines Textfeldes ein. Dieses Textfeld muss unter allen anderen Textfeldern, die durchsucht werden sollen, platziert werden. Hier wird dann mit dem Befehl “getElementsByTagName” auf das gesetzte <p> Tag gesucht.

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

Wollt Ihr einen direkten Link zu einem bestimmten Such-Begriff setzen, dann muss die Seite, auf der gesucht werden soll, auf die Dateierweiterung .php umgestellt sein. So könnte dann z.B. ein Link zu dem Begriff “Textfeld” aussehen:

http://www.nof-tutorials.com/Text-Durchsuchen/index.php?suche=Textfeld

Meine Textsuche in diesem Beispiel

Ich musste feststellen, dass NOF nun, innerhalb eines <p> Tags, jede Menge andere Tags generiert, wie z.B. ein <b> (bold) für fette Schrift.

Wenn ich nun z.B. auch nur einen Buchstaben suchen will (wie ich hier) oder im Browser eine spitze Klammer < eingebe, dann würden alle Tags von diesem Skript gefunden und somit auch der Inhalt der Tags angezeigt werden. Dadurch verschiebt sich dann auch mein gesamtes Layout.

Daher habe ich mir hier die Mühe gemacht und anstelle auf das “p” oben im Skript auf das HTML-Tag

  • <nobr>

zu verwiesen.

Ich habe also im Skript oben das “p” mit dem Tag “nobr” ersetzt. Ich habe dann den ursprünglich in mein Textfeld geschriebenen Text aus der HTML des Textfeldes kopiert (> “Text-Eigenschaften” > Button “HTML”) und diesen lediglich in die Objekt-HTML eines leeren Textfeldes in den HTML-Code Editor kopiert.

Dann habe ich ausschließlich die reinen Texte mit meinem Tag <nobr> versehen, also am Beginn des Textes

<nobr>

und am Ende des Textes dieses Tag wieder geschlossen mit

</nobr>

So werden dann ausschließlich Texte innerhalb dieses Tags durchsucht. Beispiel:

<p style="margin-bottom: 0px;"><span style="color: rgb(0,0,255);"><nobr>Es handelt sich hier um ganz normale Textfelder von NetObjects Fusion. Innerhalb aller </nobr><b><span style="font-weight: bold;">&lt;<nobr>p</nobr>&gt;</span></b><nobr> Tags wird der Text auf dieser Seite durchsucht.</nobr></span></p>

Denkt daran, dass ein <nobr> (nobr = no break = kein Umbruch) einen Zeilenumbruch verhindert. Wenn Ihr also innerhalb des Textes einen Zeilenumbruch benötigt, dann müsstet Ihr händisch ein <br> (br = break = Umbruch) einfügen.

Viel Spaß!

Tutorials von Thomas Frei-Herrmann

diese Seite weiter empfehlen


Counter Statistik