View Full Version : Highlight & UnHighlight text with Anchor Links (Code included)

Jul 11th, 2008, 10:13 PM

What i would like to do: Have the user click a link on the page (anchor link) and the word/words that are in the <a></a> tag are found in the current web pag and are highlighted.
Well, This works in theory with the bellow script.

The Problem: The highlight stays on the previous text when the user has selected for a new text to be highlighted.

The Fix: I would like the script modified so that everytime the user clicks on an anchor link the previous highlighted text is refreshed (or, the tags that made the previous text highlighted are removed). So, that the newly clicked link text is the only highlighted words on the page.

Thank you very much.

The HTML Code:

<a href="#" onclick="highlightSearchTerms("Boxing Kangaroos", true)">Boxing Kangaroos</a>, Watch out!

The Javascript Code: This may look familiar to some.

function doHighlight(bodyText, searchTerm, highlightStartTag, highlightEndTag)

// the highlightStartTag and highlightEndTag parameters are optional
if ((!highlightStartTag) || (!highlightEndTag)) {
highlightStartTag = "<span id=highlighted_text style='color:white; background-color:#006699;' font-family=arial>";
highlightEndTag = "</span>";

// find all occurences of the search term in the given text,
// and add some "highlight" tags to them (we're not using a
// regular expression search, because we want to filter out
// matches that occur within HTML tags and script blocks, so
// we have to do a little extra validation)
var newText = "";
var i = -1;
var lcSearchTerm = searchTerm.toLowerCase();
var lcBodyText = bodyText.toLowerCase();

while (bodyText.length > 0) {
i = lcBodyText.indexOf(lcSearchTerm, i+1);
if (i < 0) {
newText += bodyText;
bodyText = "";
} else {
// skip anything inside an HTML tag
if (bodyText.lastIndexOf(">", i) >= bodyText.lastIndexOf("<", i)) {
// skip anything inside a <script> block
if (lcBodyText.lastIndexOf("/script>", i) >= lcBodyText.lastIndexOf("<script", i)) {
newText += bodyText.substring(0, i) + highlightStartTag + bodyText.substr(i, searchTerm.length) + highlightEndTag;
bodyText = bodyText.substr(i + searchTerm.length);
lcBodyText = bodyText.toLowerCase();
i = -1;


return newText;

* This is sort of a wrapper function to the doHighlight function.
* It takes the searchText that you pass, optionally splits it into
* separate words, and transforms the text on the current web page.
* Only the "searchText" parameter is required; all other parameters
* are optional and can be omitted.

function highlightSearchTerms(searchText, treatAsPhrase, warnOnFailure, highlightStartTag, highlightEndTag)
// if the treatAsPhrase parameter is true, then we should search for
// the entire phrase that was entered; otherwise, we will split the
// search string so that each word is searched for and highlighted
// individually

if (treatAsPhrase) {
searchArray = [searchText];
} else {
searchArray = searchText.split(" ");

if (!document.body || typeof(document.body.innerHTML) == "undefined") {
if (warnOnFailure) {
alert("Sorry, for some reason the text of this page is unavailable. Searching will not work.");
return false;

var bodyText = document.body.innerHTML;
for (var i = 0; i < searchArray.length; i++) {
bodyText = doHighlight(bodyText, searchArray[i], highlightStartTag, highlightEndTag);

document.body.innerHTML = bodyText;
return true;

Jul 12th, 2008, 03:52 AM
Try to add this script in highlightSearchTerms function:

var rLinks=document.getElementById('highlighted_text');
rLinks.removeAttribute('id'); // This is to avoid multiple IDs in one page

Hope it helps.