Highlighting text in web pages in JavaScript
Below article is for finding a text on the webpage(document) and highlighting that search text.
we can use this article by two way getting highlighting search text through the prompt of java script or pass default highlighting search text to the function.
How to use this code:-
we can use this article by two way getting highlighting search text through the prompt of java script or pass default highlighting search text to the function.
How to use this code:-
1) Just copy and paste the java script code given bellow on the page.
2) call the function searchPrompt in the button.
3) function searchPrompt use five parameters.
2) call the function searchPrompt in the button.
3) function searchPrompt use five parameters.
a)defaultSearchText set some text value as your default highlighting text.
b)isPrompt take two value true/false set true if you want to accept the highlighting text value through prompt else set false it automatic search by default search text value.
c)treatAsPhrase set true if you want to treat the search text as a single phrase otherwise false.
d)textColor this parameter is optional set highlighted text color or leave it default highlighted text color is blue.
e)bgColor this parameter is also optional set highlighted background color or leave it default highlighted background color is yellow.
JavaScript Code:-
<script type="text/javascript">
function
doHighlight(bodyText, searchTerm, highlightStartTag, highlightEndTag) {
// the
highlightStartTag and highlightEndTag parameters are optional
if
((!highlightStartTag) || (!highlightEndTag)) {
highlightStartTag = "<font style='color:blue;
background-color:yellow;'>";
highlightEndTag = "</font>";
}
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;
}
function
highlightSearchTerms(searchText, treatAsPhrase, warnOnFailure,
highlightStartTag, highlightEndTag) {
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;
}
function
searchPrompt(defaultSearchText,isPrompt,treatAsPhrase, textColor, bgColor) {
// we can
optionally use our own highlight tag values
if
((!textColor) || (!bgColor)) {
highlightStartTag = "";
highlightEndTag = "";
} else
{
highlightStartTag = "<font style='color:" + textColor + "; background-color:" + bgColor + ";'>";
highlightEndTag = "</font>";
}
if
(treatAsPhrase) {
promptText = "Please enter the phrase you'd like to search
for:";
} else
{
promptText = "Please enter the words you'd like to search for,
separated by spaces:";
}
if
(isPrompt)
defaultSearchText = prompt(promptText,
defaultSearchText);
if
(!defaultSearchText) {
alert("No
search terms were entered. Exiting function.");
return
false;
}
return
highlightSearchTerms(defaultSearchText, treatAsPhrase, true,
highlightStartTag, highlightEndTag);
}
</script>
Use this for asking prompt,highlighting SearchText through prompt value.
Try Demo Here Click bellow
<input style="color:Blue" type="button" value="Search and Highlight through Prompt Value"
onclick="return
searchPrompt('javascript',true,false)" />
Use this for highlighting text by Default SearchText without asking prompt.
Try Demo Here Click bellow
<input style="color:Blue" type="button"
value="Search and
Highlight by Default Value" onclick="return searchPrompt('Sql Server',false,false)"
/>
Use this for asking prompt,highlighting SearchText through prompt value.
Try Demo Here Click bellow
<input style="color:Blue" type="button"
value="Search and
Highlight Phrase" onclick="return searchPrompt('Try Demo Here Click
bellow',true,true,'red','orange')" />
