Highlight & Unhighlight Text with Link on Page (Code Included) 1

[nathanielcove]

Hello,

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, highlightStartTag, highlightEndTag);
}

document.body.innerHTML = bodyText;
return true;
}

 

[tsuji]

[1] In the construction, you put all the span highlighting text with the same id, this is not satisfactory. You should better give it a custome attribute or use a more famiiiar "name" attribute. This is important and has a bearing on the scripting of improved functionality.

>highlightStartTag = "<span id=highlighted_text style='color:white; background-color:#006699;' font-family=arial>";
[tt]highlightStartTag = "<span [red]name[/red]=[red]'[/red]highlighted_text[red]'[/red] style='color:white; background-color:#006699;' font-family=arial>";[/tt]

[2] To clear the previous-search leftovers, you can do this.

[2.1] Construct a function to perform this functionality, say clearHighlightedSpans() here.
[tt]
function clearHighlightedSpans() {
var celem=document.getElementsByTagName("span");
if (celem) {
for (var i=celem.length-1;i>-1;i--) {
if (celem.getAttribute("name")=="highlighted_text") {
var s=celem.innerHTML;
var otxt=document.createTextNode(s)
celem.parentNode.insertBefore(otxt,celem);
celem.parentNode.removeChild (celem);
}
}
}
}
[/tt]
[2.2] Then you call it before doing anything else in highlightSearchTerms().
[tt]
function highlightSearchTerms(searchText, treatAsPhrase, warnOnFailure, highlightStartTag, highlightEndTag)
{
[blue]clearHighlightedSpans();[/blue]

//etc etc the same as posted

}[/tt]

 

[nathanielcove]

Thank you very much. This worked perfectly and is a Valid HTML 4.01 Strict solution. Thank you again. Perfect coding.