Skip to content
Related Articles

Related Articles

How to replace plain URL with link using JavaScript ?
  • Last Updated : 20 Sep, 2019
GeeksforGeeks - Summer Carnival Banner

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:

  • RegExp – Which looks for the URL in the provided text.
  • This RegExp parse the URL and put the address to the $1 variable.
  • After getting the URL in text, it replace it with <a> element and set its href and other attributes.

Example 1: This example implements the above appraoach.




<!DOCTYPE HTML> 
<html
<head
    <title
        How to replace plain URL with
        link using JavaScript ?
    </title
</head>
  
<body style = "text-align:center;"
      
    <h1 style = "color:green;"
        GeeksForGeeks 
    </h1
      
    <p id = "GFG_UP" style
            "font-size: 15px; font-weight: bold;"
    </p>
      
    <button onclick = "GFG_Fun()"
        click here 
    </button
      
    <p id = "GFG_DOWN" style
        "font-size: 24px; font-weight: bold; color: green;"
    </p
      
    <script
        var up = document.getElementById('GFG_UP'); 
        var down = document.getElementById('GFG_DOWN'); 
        var text = 'This is https://www.geeksforgeeks.org/';
          
        up.innerHTML = "Click on the button to replace "
                + "plain URLs with links.<br>" + text; 
          
        function rep(text) {
              
            // Put the URL to variable $1 after visiting the URL
            var Rexp = 
/((http|https|ftp):\/\/[\w?=&.\/-;#~%-]+(?![\w\s?&.\/;#~%"=-]*>))/g;
              
             // Replac the RegExp content by HTML element
            return text.replace(Rexp, 
                    "<a href='$1' target='_blank'>Link to URL</a>");
        }
          
        function GFG_Fun() { 
            down.innerHTML = rep(text);
        }
    </script
</body
  
</html>

Output:

  • Before clicking on the button:
  • After clicking on the button:

Approach 2:



  • RegExp – Which looks for the URL in the provided text and also finds the domain name of the URL.
  • After getting the URL in text, it replace it with a <a> element and set its href and other attributes. It also replaces the link text by domain name.

Example 2: This example implements the above approach.




<!DOCTYPE HTML> 
<html
  
<head
    <title
        How to replace plain URL with
        link using JavaScript ?
    </title
</head>
  
<body style = "text-align:center;"
      
    <h1 style = "color:green;"
        GeeksForGeeks 
    </h1
      
    <p id = "GFG_UP" style
            "font-size: 15px; font-weight: bold;"
    </p>
      
    <button onclick = "GFG_Fun()"
        click here 
    </button
      
    <p id = "GFG_DOWN" style
        "font-size: 24px; font-weight: bold; color: green;"
    </p
      
    <script
        var up = document.getElementById('GFG_UP'); 
        var down = document.getElementById('GFG_DOWN'); 
        var text = 'This is https://www.geeksforgeeks.org/';
          
        up.innerHTML = "Click on the button to replace "
                + "plain URLs with links.<br>" + 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,
                    "<a href='$1' target='_blank'>$3</a>");
        }
          
        function GFG_Fun() { 
            down.innerHTML = rep(text);
        
    </script
</body
  
</html>

Output:

  • Before clicking on the button:
  • After clicking on the button:

full-stack-img

My Personal Notes arrow_drop_up
Recommended Articles
Page :