Javascript find and replace link

Keep it simple! Say what you cannot have, rather than what you can have :]

As mentioned above, URLs can be quite complex, especially after the '?', and not all of them start with a 'www.' e.g. maps.bing.com/something?key=!"£$%^*[]&lat=65&lon&lon=20

So, rather than have a complex regex that wont meet all edge cases, and will be hard to maintain, how about this much simpler one, which works well for me in practise.

Match

http[s]:// [anything but a space]+

www. [anything but a space]+

Where 'anything' is [^'"\s] ... basically a greedy match, carrying on to you meet a space, quote, angle bracket, or end of line

Also:

Remember to check that it is not already in URL format, e.g. the text contains href="..." or src="..."

Add ref=nofollow [if appropriate]

This solution isn't as "good" as the libraries mentioned above, but is much simpler, and works well in practise.

if html.match[ /[href]|[src]/i ]] {
    return html; // text already has a hyper link in it
    }

html = html.replace[ 
            /\b[https?:\/\/[^\s\[\]\'\"\]+]/ig, 
            "$1" 
            ];

html = html.replace[ 
            /\s[www\.[^\s\[\]\'\"\]+]/ig, 
            "$1" 
            ];

html = html.replace[ 
             /^[www\.[^\s\[\]\'\"\]+]/ig, 
            "$1" 
            ];

return html;

View Discussion

Improve Article

Save Article

  • Read
  • Discuss
  • View Discussion

    Improve Article

    Save Article

    Given an plane URL and the task is to replace the plain URLs into the links. This problem can be solve with the help of Regular Expressions.
    Approach 1: 
     

    Example 1: This example implements the above approach. 
     

    html

        

            How to replace plain URL with

            link using JavaScript ?

        

        

            GeeksForGeeks

        

        

        

        

            click here

        

        

        

        

            var up = document.getElementById['GFG_UP'];

            var down = document.getElementById['GFG_DOWN'];

            up.innerHTML = "Click on the button to replace "

                    + "plain URLs with links." + text;

            function rep[text] {

                // Put the URL to variable $1 after visiting the URL

                var Rexp =

    /[[http|https|ftp]:\/\/[\w?=&.\/-;#~%-]+[?![\w\s?&.\/;#~%"=-]*>]]/g;

                 // Replace the RegExp content by HTML element

                return text.replace[Rexp,

                        "Link to URL"];

            }

            function GFG_Fun[] {

                down.innerHTML = rep[text];

            }

        

    Output: 
     

    • Before clicking on the button: 
       

    • After clicking on the button: 
       

    Approach 2: 
     

    Example 2: This example implements the above approach. 
     

    html

        

            How to replace plain URL with

            link using JavaScript ?

        

        

            GeeksForGeeks

        

        

        

        

            click here

        

        

        

        

            var up = document.getElementById['GFG_UP'];

            var down = document.getElementById['GFG_DOWN'];

            up.innerHTML = "Click on the button to replace "

                    + "plain URLs with links." + text;

            function rep[text] {

                // Put the URL to variable $1 and Domain name

                // to $3 after visiting the URL

                var Rexp =

    /[\b[https?|ftp|file]:\/\/[[-A-Z0-9+&@#%?=~_|!:,.;]*][[-A-Z0-9+&@#%?\/=~_|!:,.;]*][-A-Z0-9+&@#\/%=~_|]]/ig;

                // Replacing the RegExp content by HTML element

                return text.replace[Rexp,

                        "$3"];

            }

            function GFG_Fun[] {

                down.innerHTML = rep[text];

            }

        

    Output: 
     

    • Before clicking on the button: 
       

    • After clicking on the button: 
       


    Chủ Đề