Skip to main content

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:-
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.

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


Popular posts from this blog

regex - check if a string contains only alphabets c#

How to validate that input string contains only alphabets, validating that textbox contains only alphabets (letter), so here is some of the ways for doing such task. char have a property named isLetter which is for checking if character is a letter or not, or you can check by the regular expression  or you can validate your textbox through regular expression validator in asp.net. Following code demonstrating the various ways of implementation.

How to validate dropdownlist in JavaScript

In this article you will see how to put validation in dropdownlist by javascript, suppose first item value of dropdownlist is 0 and text is "-Select-" just like given below and we have to validate that at least one item is selected excluding default i.e "-Select-".

Regular expression for alphanumeric with space in asp.net c#

How to validate that string contains only alphanumeric value with some spacial character and with whitespace and how to validate that user can only input alphanumeric with given special character or space in a textbox (like name fields or remarks fields). In remarks fields we don't want that user can enter anything, user can only able to enter alphanumeric with white space and some spacial character like -,. etc if you allow. Some of regular expression given below for validating alphanumeric value only, alphanumeric with whitspace only and alphanumeric with whitespace and some special characters.

Merging multiple PDFs using iTextSharp in asp.net c#

In this article i will show you how to merge multiple pdfs into one using ITextSharp below is the two approach one is to pass your input files path, output file path (will be created if not exist) and another is pass direct input stream, output stream and it will write the merge files into output stream.