Site-Suche

Vor ein einiger Zeit habe ich mittels Skript von Webdesign Weisshart eine Suchfunktion für meine Homepage implementiert.

Das klappt wunderbar, die Suchbegriffe werden erwartungsgemäß gefunden und farblich hinterlegt auf den Zielseiten hervorgehoben.

Das Sahnehäubchen wäre, wenn zumindest die erste Fundstelle auf einer nach der Suche geöffneten Zielseite direkt in den sichtbaren Bereich geholt würde, denn meine Texte sind nicht die Kürzesten, wie der geneigte Leser bereits gemerkt haben dürfte.

Fritz Weisshart hat diese Funktionalität in seinen eigenen Skripten natürlich realisiert, ist aber leider nicht bereit, den passenden Code für die Freeware Version für private Anwender seines Suchskripts anzubieten.

Aus der Not heraus, diese Funktionalität auch meinen Besuchern zur Verfügung zu stellen, habe ich die Stelle in den Sourcen der Suchskripte gesucht, wo die Suchbegriffe fertig getaggt, also farblich hervorgehoben sind.

Direkt danach kommt folgender Javascript Codeschnipsel zum Einsatz:

document.querySelector("[class^='searchword']")?.scrollIntoView({ behavior: "smooth", _
     block: "center" });

Als Ergebnis einer Suche werden die Suchworte auf der Zielseite vom Skript behandelt, damit die CSS Formatierung die Worte findet. Sie werden in die Klasse “searchwordX” eingebettet, wobei X eine Zahl von 0 (Null) aufsteigend ist, abhängig von der Anzahl eingegebener Suchworte. Zusätzlich wird die Stelle in das Element em eingebettet. Mein Codeschnipsel ignoriert das umschließende Element em und sucht per Wildcardsuche nach der Klasse searchword, die anhängende Zahl ignorierend.

Im Inspektor von Firefox sieht eine Fundstelle nach der Suche nach “ahorn” so aus:

Sucht man nach mehreren Begriffen, also z.B. nach “ahorn microwood” ergibt sich folgendes Bild im Firefox Inspektor:

Man sieht, die Reihenfolge der Suchworte bei der Eingabe spiegelt sich in der Zuordnung der Nummerierung hinter searchword. Die 1 im Beispiel erscheint oberhalb der 0 des zuerst eingegebenen Suchbegriffs.

Mein Quick&Dirty Hack zeigt immer nur die erste Fundstelle an, unabhängig davon, ob das Suchwort ggf. erst das zweite Wort in der Suche war. Genauso fehlt eine Funktion, die bei mehreren Treffern auf einer Seite zwischen den Fundstellen wechseln kann (“Zeige nächste/vorherige Fundstelle”).

Da der Aufruf der Funktion Highlight() aus einem Binary Blob heraus erfolgt, konnte ich meinen Hack nicht an die richtige Stelle, hinter das Return von Highlight() setzen, sondern ich habe den Codeschnipsel in die Funktion noshowWait() eingebaut, die direkt nach Einfärben der Suchworte aufgerufen wird.

Funktioniert soweit, ich bin zufrieden :)