Highlighting text inside div in JavaScript
The bellow article is for finding a text on the a div content 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.
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 six parameters.
2) call the function searchPrompt in the button.
3) function searchPrompt use six parameters.
a)defaultSearchText set some text value as your default highlighting text.
b)divId set the Id of Div in which you want to search and highlight the text.
b)divId set the Id of Div in which you want to search and highlight the text.
c)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.
d)treatAsPhrase set true if you want to treat the search text as a single phrase otherwise false.
e)textColor this parameter is optional set highlighted text color or leave it default highlighted text color is blue.
f)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">
/*
* This is the function that actually
highlights a text string by
* adding HTML tags before and after all
occurrences of the search
* term. You can pass your own tags if
you'd like, or if the
* highlightStartTag or highlightEndTag
parameters are omitted or
* are empty strings then the default
<font> tags will be used.
*/
function
doHighlight(DivText, searchTerm, highlightStartTag, highlightEndTag) {
// the
highlightStartTag and highlightEndTag parameters are optional
if
((!highlightStartTag) || (!highlightEndTag)) {
highlightStartTag = "<font style='color:blue;
background-color:yellow;'>";
highlightEndTag = "</font>";
}
// 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
lcDivText = DivText.toLowerCase();
while
(DivText.length > 0) {
i =
lcDivText.indexOf(lcSearchTerm, i + 1);
if
(i < 0) {
newText += DivText;
DivText = "";
} else
{
//
skip anything inside an HTML tag
if
(DivText.lastIndexOf(">", i)
>= DivText.lastIndexOf("<",
i)) {
// skip anything inside a <script> block
if (lcDivText.lastIndexOf("/script>",
i) >= lcDivText.lastIndexOf("<script",
i)) {
newText +=
DivText.substring(0, i) + highlightStartTag + DivText.substr(i,
searchTerm.length) + highlightEndTag;
DivText =
DivText.substr(i + searchTerm.length);
lcDivText =
DivText.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,divId,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(" ");
}
var
div=document.getElementById(divId);
if
(!div || typeof (div.innerHTML) == "undefined") {
if
(warnOnFailure) {
alert("Sorry,
for some reason the text of this page is unavailable. Searching will not
work.");
}
return
false;
}
var
DivText = div.innerHTML;
for
(var i = 0; i < searchArray.length; i++) {
DivText = doHighlight(DivText,
searchArray[i], highlightStartTag, highlightEndTag);
}
div.innerHTML = DivText;
return
true;
}
/*
* This displays a dialog box that
allows a user to enter their own
* search terms to highlight on the
page, and then passes the search
* text or phrase to the
highlightSearchTerms function. All parameters
* are optional.
*/
function
searchPrompt(defaultSearchText,divId,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,divId, treatAsPhrase, true, highlightStartTag, highlightEndTag);
}
</script>
Use this for asking prompt,highlighting pharse through prompt value inside a div content.
Try Demo Here Click bellow
<input type="button" value="Search and Highlight Phrase" onclick="return searchPrompt('search text','mydiv',true,true,'red','orange')" />
Content of Mydiv:-
Highlighting
search text inside a div content through javascript inside div content search
text inside div javascript content highlight search text div content inside div
javascript content through javascript content of div search text inside content
inside div javascript
Use this for asking prompt,highlighting word's through prompt value inside a div content.
Try Demo Here Click bellow
<input type="button" value="Search and Highlight Words through prompt" onclick="return searchPrompt('inside div javascript','mydiv',true,false,'red','orange')" />
Use this for highlighting word's by Default SearchText without asking prompt inside a div content.
Try Demo Here Click bellow
<input type="button" value="Search and Highlight Words by Default Value" onclick="return searchPrompt('div content','mydiv',false,false)" />
