searchhi: Automatic search word highlighting after web searches
What it is
The searchhi JavaScript library is a way of automatically highlighting words on a page when that page was reached by a search engine. In essence, if you search, for example, Google for some words, and then follow a link from the search results to a searchhi enabled page, the words you searched for will be highlighted on that page. Pretty neat, huh?
How do I do it?
How do I get this cool thing to work for me, Uncle Stuart?
It's easy. Just copy the searchhi library to
somewhere on your web server, and then include it in every page you
want this to work on by adding the following line somewhere in the
header:
<script src="searchhi.js"
type="text/javascript"></script>
Then add, somewhere in your stylesheet, a style for span.searchword (or
just .searchword if you like) -- this style is how highlighted words
will be, well, highlighted. (I use "background-color: yellow".)
That's it! That's all you have to do.
How does it work?
Oh, so you're man enough for the explanation, then, huh? It's not that hard, really. It checks document.referrer for a querystring with q=somethingorother in it (as Google does, and as do a host of other search engines), breaks that query up into words, and then recursively walks each node from the BODY down, once for each search word, looking for text nodes. When it finds a text node it checks to see if it contains the current search word; if it does, it replaces the current text node with three new nodes -- one which is a text node containing everything before the search word, a span containing only the search word (and of class "searchword" -- this is why the highlighting works!), and another text node that contains everything after the search word. It could probably be optimised a bit (you'll see why if you follow the code paths and think about it -- why does it check the parentNode's class?), but I wanted to get it out there.
The hell with all this talk, show me some examples!
OK. Go to Google and search for the words "kryogenix" and "therapy" on the same page. Then follow the "writings" link. See how the words are highlighted? There you go.Stopping some parts of your page being highlighted
Update, 2007-03-16: It may be useful to explicitly
stop searchhi highlighting matching
words in parts of your page (for example, in the navigation). To do
this, add class="nosearchhi" to any elements that you don't
want highlighted. Note that this applies to not only the element you put
the class on but all its children as well, so nothing inside that
element will get highlighted even if it's inside another element as
well. Thanks to Helmut Lorenz for the idea and testing!
Extra credit
My thanks to Peter Janes for fixing a bug and making the search case-insensitive, something that lots of people asked for and I never got a sufficiently round tuit to do. Cheers, Peter! Thanks also to Alex Thomann for correcting a typo.
Fritz Weisshart has put together a German translation of the searchhi instructions; thanks, Fritz!
Golo Roden has ported searchhi to a .NET base class: see searchhi.net for details!
Pete Boere made some tweaks to searchhi to highlight whole word matches and a few other things.