Dave Lemen: JavaScript Search Term Highlighter

October 22, 2004

JavaScript Search Term Highlighter

This script highlights searched words on your web page.

Since it's implemented in JavaScript that runs in the browser, you don't need to do anything special on the server. It works in static HTML files as well as dynamically generated pages.

The default set of styles looks just like the Google cached pages. An added feature is that your visitors can turn off highlighting and/or hide the legend with one click.

You can try it out here.

Search Term Highlighter 
Author: Dave Lemen
Version: 0.6

This script highlights searched words on your web page. Since it's implemented 
in JavaScript that runs in the browser, you don't need to do anything special 
on the server. It works in static HTML files as well as dynamically generated
pages.

Here's how to implement it:
1. (Optional) Change the items in the Configuration Section that you want to change.
   There are examples to show you how.
2. Put this file on your web server.
3. Add a script tag to your web page, like this:
	<script type="text/javascript" src="/highlighter.js"></script>
4. Add an "onload" attribute to the body tag, like this:
	<body onload="highlighter.highlight()">
*/

window.highlighter = new SearchTermHighlighter();

// ---------------------------------------------------------------------------
// Configuration Section:
// ---------------------------------------------------------------------------

// Uncomment the following line to hide the legend.
// highlighter.legend = false;

// List the URL parameters that contain search terms.
// Defaults: q, as_q, as_epq, as_oq, query, search
// Example:
// highlighter.parameters = 'q, as_q, as_epq, as_oq, query, search';

// Use addStyle(color, background, fontWeight) to change the highlighting style.
// This is optional. A set of 10 default styles will be used automatically.
// Example:
// highlighter.addStyle('#000', '#FF4', 'bold'); // bold, black text on yellow background.

// ---------------------------------------------------------------------------

highlighter.init();

function SearchTermHighlighter()
{
	var ok = ((document.createElement) ? true : false);
	var isInitialized = false;
	var searchTerms = new Array();
	var foundCount = 0;
	var styles = new Array();
	var usingDefaultStyles = true;
	var DEBUG = false;

this.parameters = 'q as_q as_epq as_oq query search';
	this.legend = true;
	this.addStyle = addStyle;
	this.init = init;
	this.loadSearchTerms = loadSearchTerms;
	this.highlight = highlight;
	this.highlightTerm = highlightTerm;
	this.writeLegend = writeLegend;
	this.hideLegend = hideLegend;
	this.unhighlight = unhighlight;
	
	if (!ok) return;
	loadDefaults();

function addStyle(color, background, fontWeight)
	{
		if (!ok) return;
		if (usingDefaultStyles) { styles = new Array(); usingDefaultStyles = false; }
		styles.push(new HighlightStyle(color, background, fontWeight));
	}

if (node.nodeType == 3)
		{
			var p = node.parentNode;
			if (p.nodeName != 'TEXTAREA' && p.nodeName != 'SCRIPT' && p.className.substr(0, term.CSS_CLASS_PREFIX.length) != term.CSS_CLASS_PREFIX)
			{
				var result = term.pattern.exec(node.nodeValue);
				if (result != null)
				{
					term.found = true;
					foundCount++;
					var v = node.nodeValue;
					var lt = document.createTextNode(v.substr(0, result.index));
					var rt = document.createTextNode(v.substr(result.index + result[0].length));
					var span = document.createElement('SPAN');
					span.className = term.cssClass;
					span.appendChild(document.createTextNode(result[0]));
					p.insertBefore(lt, node);
					p.insertBefore(span, node);
					p.replaceChild(rt, node);
				}
			}
		}
	}

function debugAlert(msg){if(DEBUG)alert(msg);}

function SearchTerm(index, term)
	{
		this.CSS_CLASS_PREFIX = 'sth_';
		this.index = index;
		this.term = term.toLowerCase();
		this.cssClass = this.CSS_CLASS_PREFIX + this.term.replace(/[^a-z0-9_ ]/g, '').replace(/ /g, '_');
		this.pattern = new RegExp('\\b' + this.term + '\\b', 'i');
		this.found = false;
		this.toString = function(){return this.term};
	}

function HighlightStyle(color, background, fontWeight)
	{
		this.color = color;
		this.background = background;
		this.fontWeight = fontWeight;
		this.toString = function(){return 'color:' + this.color + ';background:' 
			+ this.background + ';font-weight:' + this.fontWeight + ';'};
	}
}

Posted by dlemen at October 22, 2004 9:12 PM

Comments

welcome to the blogosphere dave! i know i'll probably be way out of my depth in your tech discussions, but i'll keep coming back!

Posted by: bobbie at October 23, 2004 6:57 AM

Test Comment

Posted by: Dave Lemen at January 20, 2005 12:06 PM