Scott Yang's Playground

One issue of Bill Zeller’s Staticize plugin for WordPress, which I have discussed yesterday, is its incompatibility with the Search Hilite plugin. Visitor landed on a cached page via a search engine query would not get keywords highlighted, and one must also turn Search Hilite off so that keyword highlights would not accidentally be cached by Staticize. However, much of the Search Hilite functionality can be duplicated on the client side easily using Javascript. So last night I wrote this Javascript module to simply achieve that.

About

This Javascript can be imported into any HTML page. It would analyse the referrer value for search engine keywords, and then highlight those keywords on the page, by wrapping them around <span class=”hilite”>…</span> tags. Document can then define styles else where to provide visual feedbacks.

Live Demo

Search keyword highlight javascript on the might Google, and click on the link that brings back to this page. Hopefully it is still at the number 1 spot :)

Usage

Add the following line to your HTML document/template. It uses windows.onload event handler to perform highlighting after the document has been fully loaded, so it does not really matter where you put it.

    <script type="text/javascript" src="se_hilite.js"></script>

Then Define the following styles in your CSS stylesheet.

    .hilite { background-color: #ff0; }

If Hilite.style_name_suffix is true, define the follow styles instead.

    .hilite1 { background-color: #ff0; }
    .hilite2 { background-color: #f0f; }
    .hilite3 { background-color: #0ff; }
    .hilite4 ...

Currently it supports queries from AllTheWeb, Google, Lycos, MSN and Yahoo, but it is trivial to add supports for other search engines. The Javascript is configurable so you can easily have it to use a different class name for the highlighted style, or using a unique class name for each search keywords. It would not try to highlight keywords on the whole page, but will try to find DOM element of "content" and "container", before highlighting everything inside document.body. That means it would not only work well with WordPress and Movable Type, but you can also use it with other static web pages that do not utilise a server-side solution.

Download

• Download: se_hilite.js 1.2 (19 August 2005) - latest
• Download: se_hilite.js 1.1 (24 October 2004)
• Download: se_hilite.js 1.0 (4 June 2004)

Compatibility

One disadvantages of using a client side Javascript solution is that if somehow Javascript support is absent, either being intentionally turned off or filtered, or text-mode/old browsers that do not support it, then keyword highlight using this solution would not work. It can also be slow working on its search and replace over a large document.

The following browsers have been tested for full compatibility:

• Mozilla Firefox 1.0
• Microsoft Internet Explorer 6.0 SP1

The following browsers are partially working.

• Safari 1.2.3 (Panther) - extra new lines would be injected into <PRE/> when it is retrieved via .innerHTML. Nor does it allow callback function to be passed into String.replace(), so generating distinctive highlights for each keyword does not work.

The following browsers are known not working due to insufficent Javascript support.

• Safari 1.0.3 (Jaguar)
• Mac IE 5.x

History

• 1.2 (19 August 2005)
  • Fix up the bug when search keyword containing partial match of 'span class="hilite"'.
  • Having an extra boolean flag Hilite.exact, whether the parser should perform exact match. Default to true, i.e. searching for "search" will not match "searching".
  • Minor performance optimisation.
• 1.1 (24 October 2004)
  • Fixed a bug when multiple consective spaces are present in the query string. (Thanks to Gerardo Robledillo for providing the fix)
  • Create anonymous function for window.onload in case it has already been assigned.
  • Minor speed improvement by reducing copying.
• 1.0 (4 June 2004)
  • Initial release.