Very Simple Highlighting Using JavaScript on Client-Side

Introduction

Both

Highlighting Words from Search Results with JavaScript
In-page Highlighting with JavaScript
show examples of the JavaScript in searchhi.js that highlight words on a page. In both cases the script can be used to highlight words selected by a text field in a form on the page. However, because the script was originally intended for more advanced purposes, the configuration also has the script doing other things in the background that may not be needed by some people.

Here I show how to use searchhi.js in a much slimmer way to do vanilla client-side in-page word highlighting. However, some people may be more comfortable with something even slimmer, so here I also introduce searchhi_slim.js and the way to use it for very slim and very simple client-side JavaScript highlighting.

The end goal

The goal is to setup a form like the one below that searches through a document for some words and highlights them with some special background color. Note that if you refresh your webpage, the highlighting will disappear just as if you had selected "Remove Highlight."

Highlight words:

Using searchhi.js in a slim way

First, setup your highlighting color and include the script. Add the following lines to your <head>...</head> section. If you download the script yourself, change the <script> line to point to wherever you put the script.
<style> </style> <script src="http://links.tedpavlic.com/js/searchhi.js" type="text/javascript" language="JavaScript"></script>
Then, somewhere in the <body>...</body> of your document, place a search form similar to the following. (note that you can leave out any of these buttons and change any of the text)
<form name="searchhi" action="" onSubmit="localSearchHighlight('?h=' + document.searchhi.h.value); return false;"> <p>Highlight words: <input name="h" value="" /></p> <input type="button" value="Highlight" onclick="localSearchHighlight('?h=' + document.searchhi.h.value);" /> <input type="button" value="Remove Highlight" onclick="unhighlight(document.getElementsByTagName('body')[0])" /> </form>
This should achieve the goal.

Using the always slim searchhi_slim.js

First, setup your highlighting color and include the script. Add the following lines to your <head>...</head> section. If you download the script yourself, change the <script> line to point to wherever you put the script.
<style> </style> <script src="http://links.tedpavlic.com/js/searchhi_slim.js" type="text/javascript" language="JavaScript"></script>
Then, somewhere in the <body>...</body> of your document, place a search form similar to the following. (note that you can leave out any of these buttons and change any of the text) (note that the syntax here is slightly different from the syntax above. A number of '?h=' have been left out in this slim version.
<form name="searchhi" action="" onSubmit="localSearchHighlight(document.searchhi.h.value); return false;"> <p>Highlight words: <input name="h" value="" /></p> <input type="button" value="Highlight" onclick="localSearchHighlight(document.searchhi.h.value);" /> <input type="button" value="Remove Highlight" onclick="unhighlight(document.getElementsByTagName('body')[0])" /> </form>
This should achieve the goal.

Additional Concern: Microsoft Incompetence and Microsoft Internet Explorer

There is an additional note that might be important to some but will most likely not have any affect on the average user of this script. Due to incompetence by Microsoft engineers, in some versions of Microsoft Internet Explorer, sometimes the dynamic generation of the highlighting backgrounds will take anchors out of focus. That is, if you have a webpage that has "anchors" or "bookmarks" on it so that on entry to the webpage position the reader at a particular spot on the page, the highlighting process can move them away from that spot. If you are experiencing this trouble, all you have to do is refresh location.hash with itself after the highlighting is complete. To do this, add the line
if( location.hash.length > 1 ) location.hash = location.hash;
to the end of each of the three JavaScript events shown in the examples above (however, put it before the return false; in the onSubmit events). For example
<form name="searchhi" action="" onSubmit="localSearchHighlight('?h=' + document.searchhi.h.value); if( location.hash.length > 1) location.hash = location.hash; return false;">

Additional improvements

Feel free to add your own customizations. For example, you may want to add a document.searchhi.reset(); document.searchhi.h.focus(); to the end of some of the handlers. Take the form below as an example. Its slim source:
<form name="searchhi" action="" onSubmit="localSearchHighlight(document.searchhi.h.value); document.searchhi.reset(); document.searchhi.h.focus(); return false;"> <p>Highlight words: <input name="h" value="" /></p> <input type="button" value="Highlight" onclick="localSearchHighlight(document.searchhi.h.value); document.searchhi.reset(); document.searchhi.h.focus();" /> <input type="button" value="Remove Highlight" onclick="unhighlight(document.getElementsByTagName('body')[0]); document.searchhi.reset(); document.searchhi.h.focus();" /> </form>
The new form:

Highlight words:

You may also want to try things like writing some JavaScript to execute the unhighlight if the text field is empty and the highlight button was clicked (or the form was submitted).

Simple In-page Highlighting :: Using JavaScript on Client-Side