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", "");

            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);

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

Recent Posts