Search Engine Keyword Highlight with Javascript

Abstract

Search Engine Highlight is a Javascript file that can be imported into any HTML page, and automatically highlights search engine keywords in the document. Highlighted keywords are wrapped in <span class="hilite">...</span> tags. Document can then define styles to provide visual feedbacks.

Live Demo

Search keyword highlight javascript on the Google, and click on the link that brings back to this page.

Download

Usage

  1. Download the ZIP file from the above link, unzip, and three files will be produced:

    1. se_hilite_src.js: Source file for Search Engine Highlight.
    2. se_hilite.js: Compressed Javascript file, using Dojo ShrinkSafe.
    3. se_hilite_test.html: Testing HTML.

    Alternatively you can just download se_hilite.js from the SVN repository using the above link.

  2. Copy se_hilite.js onto your web host.

  3. Add the following line to your HTML document/template. It does not matter where it is placed, as highlighting will only be triggered after the document has been fully-loaded.

    <script type="text/javascript" src="path_to/se_hilite.js"></script>
    
  4. Define the following styles in your CSS stylesheet/HTML.

    .hilite { background-color: #ff0; }
    

    or, if Hilite.style_name_suffix has been set to true (which is default in the distribution), define the following styles instead.

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

    The number after .hilite corresponds to the distinct keyword matched. For example, if someone searched for foo bar baz, then all occurrence of "foo" in the document will be given style "hilite1", all "bar" will be "hilite2", "baz" as "hilite3", etc.

Currently it supports queries from:

However, it should be trivial to add supports for other search engines.

Configuration

Search Engine Highlight can be configured after the script has been imported, but not yet executed. For example,

<script type="text/javascript" src="path_to/se_hilite.js"></script>
<script type="text/javascript">
Hilite.<parameter> = <value>;
Hilite.<parameter> = <value>;
...
</script>

Available parameters:

elementid:
DOM element ID to be highlighted. If set, then only content inside this DOM element will be highlighted. If not set, or if the DOM element cannot be found, then everything inside <body/> will be highlighted. Default: 'content'.
exact:
Whether we are matching an exact word. For example, searching for "foo" will only match "foo" but not "foobar". Default: true.
max_nodes:
Maximum number of DOM nodes to parse, before handing the control back to UI thread. This prevents locking up the UI when parsing and replacing inside a large document. Default: 1000.
style_name:
CSS class name of the style to be used for highlighting. Default: 'hilite'.
style_name_suffix:
Whether to use different style names for different search keywords by appending a number starting from 1, i.e. hilite1, hilite2, etc. Default: true.

Compatibility

The following browsers have been tested for full compatibility:

  • Mozilla Firefox 1.0/1.5/2.0
  • Microsoft Internet Explorer 6.0/7.0
  • Opera 8/9

Support

Please post your support issues to my Javascript forum detailing your situation, i.e. what is not working, what browser are you using, etc.

History

  • 1.5 (2006-12-08)
    • Fix style_name_suffix issue.
    • Add extra search engines (Technorati, Dogpile, Live), and support for engines with query on path instead of query string.
  • 1.3 (2005-09-12)
    • Rewrite the parsing engine to use DOM instead of replacing the whole document using innerHTML.
    • Easier customisation on search engines.
    • Use Javascript Cruncher for distribution.
  • 1.2 (2005-08-19)
    • 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 (2004-10-24)
    • Fixed a bug when multiple consecutive 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 (2004-06-04)
    • Initial release.