Skip to main content

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.

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.

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. 

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)" />


Popular posts from this blog

Uploading large file in chunks in Asp.net Mvc c# from Javascript ajax

Often we have a requirement to upload files in Asp.net, Mvc c# application but when it comes to uploading larger file, we always think how to do it as uploading large file in one go have many challenges like UI responsiveness, If network fluctuate for a moment in between then uploading task get breaks and user have to upload it again etc.

What is NameSpace in .Net

This a basic question which allways asked in the interview that what is the namespace ,do you know about namespace,can you tell me some words about namespace.

How to handle click event of linkbutton inside gridview

Recently I have posted how to sort only current page of gridview, Scrollble gridview with fixed header through javascript, File upload control inside gridview during postback and now i am going to explain how to handle click event of linkbutton or any button type control inside gridview.

We can handle click event of any button type control inside gridview by two way first is through event bubbling and second one is directly (in this type of event handling we need to access current girdviewrow container)

how $document.ready() is different from window.onload()

we often use window.onload() in javascript and $document.ready() in jquery and assume that both are same just jquery library wrap up javascript window.onload() and introduce $document.ready() but no there is much difference between them below is the explanation -

Scrollable Gridview with fixed headers in asp.net

horizontal and vertical scrollable Gridview with static header row.fixed header in gridview in asp.net.static header in gridview through java script.I was looking for a solution for this for a long time and found most of the answers are not working or not suitable for my situation i also find most of the java script code for that they worked but only with the vertical scroll not with the horizontal scroll and also combination of header and rows doesn't match.