Skip to main content

Finding, convert text input into hyperlink in JavaScript

The bellow article is for finding a text on the webpage and convert that text into a link.
we can use this article by two way 
Getting search text and link herf through the prompt of javascript or pass default search text and link href to the function.

How to use this code:-
1) Just copy and paste the javascript code given bellow to your page.
2) call the function searchPrompt_aslink in the button.
3) fuction searchPrompt_aslink use three parameters
   
a) searchtext set blank ('') if you want to use prompt to accepting the searchtext otherwise set a default value for searchtext.

b) treatAsPhrase set true if you want to treat the search text   as a single pharse otherwise false.

c) href set blank ('') or leave it (optional parameter) for using the prompt of java script to entering the link href otherwise set a default value of link href.

<script type="text/javascript">
 /*
* This is the function that actually highlights a text string by
* adding HTML tags before and after all occurrences of 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(bodyText, 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 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[i], highlightStartTag, highlightEndTag);
            }

            document.body.innerHTML = bodyText;
            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_aslink(searchText, treatAsPhrase, href) {
// This function prompts the user for any words that should
// be highlighted on this web page

            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 (!searchText)
                searchText = prompt(promptText, "search");
               
            if (!href)
                href = prompt("Please Enter Link Href", "http://c-sharp-corner.blogspot.com");

            highlightStartTag = "<a href='" + href + "'>";
            highlightEndTag = "</a>";

            if (!searchText) {
                alert("No search terms were entered. Exiting function.");
                return false;
            }

            return highlightSearchTerms(searchText, treatAsPhrase, true, highlightStartTag, highlightEndTag);
        }
              
    </script>

Use this for showing prompt for accepting SearchText and Link Href.
Try Demo Here Click bellow


<input type="button" value="search" onclick="return searchPrompt_aslink('',true,'')" />


Use this for creating link by Default SearchText and Link Href without asking prompt.
Try Demo Here Click bellow


<input type="button" value="search" onclick="return searchPrompt_aslink('Try Demo Here',true,'http://http://c-sharp-corner.blogspot.com/search/label/JavaScript')" />


Popular posts from this blog

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.

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 -

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.

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.