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

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.

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.

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)

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.