Freitag, 22. März 2019
Ein Textmarker für Google & Co.
Hinweis:
Dieser Artikel ist älter als 18 Monate / wurde seit 18 Monaten nicht aktualisiert. Dies kann (muss aber nicht) dazu führen, dass der Artikel, und / oder darin beschriebene Techniken, nicht mehr aktuell sind. Bitte berücksichtigen Sie diesen Hinweis bei der Lektüre.
Übersetzung eines Artikels von Stuart Langridge bei externer Link: www.kryogenix.org/code/browser/searchhi/
Titel des Originals:
searchhi: Automatic search word
highlighting after web searches
Anmerkung des Übersetzers - translators note:
Die hier vorgestellte Technik wird auf diesen Seiten eingesetzt, auch für die seiteninterne Suche.
Achtung: Zur Verwendung mit meiner Suchfunktion muß das von mir angepaßte Script (im Download des Suchscripts in der datei wdw_suche.js enthalten) verwendet werden. Das Originalscript funktioniert in diesem Zusammenhang nicht!
Bei der Übersetzung habe ich versucht, mich so nahe wie möglich am Wortlaut des Originals zu halten. Auf stilistisch geschliffene Formulierungen habe ich bewußt verzichtet, da dies für das Verständnis des Inhalts nicht notwendig ist. Sollte mir dennoch bei der Übersetzung ein Fehler unterlaufen sein, der zu einer entstellenden Wiedergabe des Originals führt, bitte ich um entsprechende Hinweise im Weblog.
Das Beispiel am Ende des Artikels wurde sinngemäß abgeändert und verweist jetzt auf meine eigenen Seiten.
searchhi.js -
Ein Textmarker für Google & Co.
Was ist denn das?
Das Javascript wdw_suche.js - das von mir angepaßte Script ist im Download des Suchscripts enthalten - ist eine Möglichkeit,
Suchwörter auf einer Seite, die von einer Suchmaschine gefunden wurde, automatisch zu markieren.
Kurz: Wenn Du z.B. bei Google nach einem bestimmten Begriff suchst, und dann von der
Seite mit den Suchergebnissen einem Link folgst, dann werden die Suchbegriffe auf auf
der mit wdw_suche.js ausgerüsteten Seite automatisch markiert. Cool, was?
Und wie geht das?
Wie bringe ich dieses coole Script auf meinen Seiten zum Laufen?
Ganz einfach:
Lade das das von mir angepaßte Script - im Download des Suchscripts enthalten - auf Deinen Server (in jedes Verzeichnis, das vom Script durchsucht wird, entsprechend den Einstellungen in deiner search_config.php!), und füge auf jeder Deiner Seiten im header (irgendwo zwischen <head> und
</head>) folgende Zeile ein (ohne Zeilenumbruch):
<script src="wdw_suche/wdw_suche.js" type="text/javascript">
</script>
Dann noch in Dein CSS Stylesheet einen Stil für
.searchword bis .searchword9. Damit kannst Du bestimmen, wie der
markierte Text gekennzeichnet wird. Ich benutze:
.searchword {
color: #222;
background-color: #ff6;
border: 1px dotted #ff6;
}
.searchword0 {
color: #222;
background-color: #ff6;
border: 1px dotted #ff6;
}
.searchword1 {
color: #222;
background-color: #a0ffff;
border: 1px dotted #0affff;
}
.searchword2 {
color: #222;
background-color: #9f9;
border: 1px dotted #9f9;
}
.searchword3 {
color: #222;
background-color: #f99;
border: 1px dotted #f99;
}
.searchword4 {
color: #222;
background-color: #f6f;
border: 1px dotted #f6f;
}
.searchword5 {
color: #fff;
background-color: #800;
border: 1px dotted #800;
}
.searchword6 {
color: #fff;
background-color: #0a0;
border: 1px dotted #0a0;
}
.searchword7 {
color: #fff;
background-color: #886800;
border: 1px dotted #886800;
}
.searchword8 {
color: #fff;
background-color: #004699;
border: 1px dotted #004699;
}
.searchword9 {
color: #fff;
background-color: #909;
border: 1px dotted #909;
}
Anmerkung:
Der gepunkte Rahmen in gleicher Farbe wie der Hintergrund erscheint überflüssig. Der Sinn dahinter ist folgender: Wenn im Browser die Anzeige von Farben ausgeschaltet ist, oder eigene Farben definiert sind, dann wird anstelle des highlighting ein gepunkteter Rahmen um die Treffer angezeigt.
Fertig. Das ist alles!
Und wie funktioniert das Script?
Du willst Dir die Erklärung wirklich antun? O.k., so schlimm ist es auch wieder nicht. Das Script überprüft den document.referrer darauf, ober er einen String mit q=irgendetwas enthält (Google und viele andere Suchmaschinen kennzeichnen die Ergebnisseiten auf diese Art), teilt danach den Suchstring in einzelne Wörter auf, und durchsucht schließlich für jedes Suchwort rekursiv jeden node vom <body> an abwärts nach Text nodes. Wenn es einen Text node findet, dann prüft es, ob dieser node das jeweilige Suchwort enthält; falls ja, ersetzt es diesen Text node durch drei nodes: der erste enthält alles vor dem Suchwort, dann ein <em> der nur das Suchwort enthält (und mit der Klasse "searchword" ausgezeichnet wird - damit später die Markierung funktioniert), und der letzte node enthält schließlich den ganzen restlichen Text.
Danksagungen
Dank an Peter Janes für einen bugfix. Peter hat außerdem die Suche von Groß-/Kleinschreibung unabhängig gemacht. Dank auch an Alex Thomann für den Hinweis auf einen Schriebfuhler.
Artikeltexte und Code-Snippets: Creative Commons CC BY-SA 4.0
Medien (Bilder, Videos, Audios) sind evtl. urheberrechtlich geschützt.
Kommentare
Über Ihren Kommentar zu diesem Artikel freue ich mich.
Wenn Sie aber Fragen haben, und eine Antwort erwarten, nutzen Sie bitte das Supportforum! Die Nutzung des Forums ist auch ohne Registrierung möglich.