Using JavaScript to Search For and Highlight Text on a Web Page
This is the page that I will be searching and replacing on. Some text will be
already be highlighted because I called the highlightSearchTerms function from
the "onload" event in the <body> tag. You can also highlight your own
search terms by clicking the buttons below. To steal this code, just copy the
JavaScript functions from the source of this page.
The highlightSearchTerms function has an optional parameter to determine whether
the individual words in a search term should be highlighted separately, or if they
should be treated as a phrase. By default, terms will be split and highlighted
individually. SeArChEs aRe nOt cAsE-sEnSiTiVe.
Here's some text inside a div, just to show that the search and replace
feature works on text blocks that are already being formatted with <div>,
<font>, etc. without altering the existing formatting (other than adding
the highlight). The doHighlight function that actually performs the searching
and replacing uses simple logic to exclude search terms that are found within
HTML tags or script blocks.
One possible use of this code is to write a JavaScript function to check the document
referrer, and if someone has reached this page from a search engine, then the search terms
that brought the visitor here could automatically be highlighted when the page loads by
calling the function in the "onload" event of the <body> tag. You should be able to
use the highlightGoogleSearchTerms function on this page as a starting point for such a
thing.
A few notes about using these functions:
you should only call the functions from the onload event of the body tag, or from a
button or link or something that's triggered after the page is loaded. If you try to call
these functions before a page has finished loading (for example, from a script block in
the <head> or <body> section of the page), you will have unpredictable
results.
The performance is a little slow if you have a large number of matches on a big web
page (for example, if you try to match "a" on a 100k page). For a moderate number of
matches, even on a large page, the performance is generally fine.
If there are HTML tags between letters of a word or between words in a phrase, then
the word/phrase will not be highlighted as a match. For example, a search for "plant"
will not match the word plant, because the HTML representation of the word is
"p<u>lan</u>t", and the HTML tags will throw the search off. Likewise, if
you highlight part of a word using a search, and then try to highlight the word itself,
the word will not be matched for the same reason (if you search for and highlight "ant"
and then try to search for and highlight "plant", you won't get any matches for "plant"
because the HTML for the word will have been changed to
"pl<highlightStartTag>ant<highlightEndTag>").
I have no idea how cross-browser compatible this code is. I tested it with IE 6 and
Mozilla Firebird 0.6, and it worked on both of those (which was good enough for me).
You are on the nsftools.com website.
http://www.nsftools.com/misc/SearchAndHighlight.htm