Search highlighting

Monday 8 December 2003

I’ve added a new search feature to this site. If you visit here from a search engine, the page greets you with a welcome box, and highlights all of your search terms on the page. Try it: sample easier joy.

The work is done by some JavaScript code that parses the referrer to determine the search words, then uses DHTML to style the words on the page. The code came from Stuart Langridge via Paul Ford’s new Harper’s magazine site. I added the welcome message (though I recall seeing it done somewhere before), and also multiple color highlighting.

I don’t like the fact that the highlighting works within words rather than just on whole words, but I think it’s still a nice effect.


I took a quick look at the javascript and it looks to me that the word search within a node is done on the line:

if (tempNodeVal.indexOf(tempWordVal) != -1) {

Changing that line to use a regular expression along the lines of '(\b|^)tempWordVal(\b|$)' might do the trick for fixing the problem with searching within a word. Of course, I haven't tried it myself... ;)
Darn, I was just about to suggest that. The reason it does search highlighting between words is that I like it, really, but the regexp solution will neatly turn it off :)
Another implementation of this same idea is Neil Fraser's search highlighter, which works by using Apache 2's mod_ext_filter.
I've done this using Midas' SmartRefs functionality before, which is good because it works in a Notes client too, but I like the flexibility of this implementation for a weblog. I might put this on my site as well. Thanks!

Add a comment:

Ignore this:
Leave this empty:
Name is required. Either email or web are required. Email won't be displayed and I won't spam you. Your web site won't be indexed by search engines.
Don't put anything here:
Leave this empty:
Comment text is Markdown.