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.

Comments

[gravatar]
Phil Haack 10:44 PM on 8 Dec 2003

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... ;)

[gravatar]
sil 2:10 AM on 9 Dec 2003

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 :)

[gravatar]
Lao 7:18 AM on 9 Dec 2003

Another implementation of this same idea is Neil Fraser's search highlighter, which works by using Apache 2's mod_ext_filter.

[gravatar]
Ben Langhinrichs 8:28 AM on 9 Dec 2003

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:

name
email
Ignore this:
not displayed and no spam.
Leave this empty:
www
not searched.
 
Name and either email or www are required.
Don't put anything here:
Leave this empty:
URLs auto-link and some tags are allowed: <a><b><i><p><br><pre>.