Welcome to Geoffrey Swift's βlog. Please subscribe to the Atom feed.


Highlighting of search terms from referer

Having had a look through my referer logs, it was clear people were obviously using Google to find the site. To make things easier to find, search terms used on Google are now highlighted in the page when a user finds their way here.

The work happens in the browser, rather than the web server producing a modified version specially for the user. This way caching all works as normal.

The first step is to parse the search query, into individual terms. Then my code recursively searches through the DOM and finds any text nodes which match the current search term. Any such text node is then replaced by a sequence of nodes containing either highlighted and unhighlited text.

The hard work in this is all done through regular expressions and the DOM/CSS. Try it out for yourself and use view source if you're really interested!

Comments

This functionality is limited to search terms of ASCII characters. The flaw in the implementation is the use of the JavaScript regular expression metacharacter \w to match word boundaries. This does not work, for example when searching for cyrillic text.

Comments for this post are now closed.