How to replace plain URL with link using JavaScript ?

0 0 1 minute read

Given a plane URL, the task is to replace the plain URLs with the links. This problem can be solved with the help of Regular Expressions.

Approach: Using RegExp and replace() Method

RegExp – This looks for the URL in the provided text.
This RegExp parses the URL and puts the address to the $1 variable.
After getting the URL in the text, it replaces it with <a> element and sets its href and other attributes.

Example: This example implements the above approach.

html

<!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>
        let up = document.getElementById('GFG_UP');
        let down = document.getElementById('GFG_DOWN');
        let text = 'This is https://www.zambiatek.com/';
 
        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
            const Rexp =
/((http|https|ftp):\/\/[\w?=&.\/-;#~%-]+(?![\w\s?&.\/;#~%"=-]*>))/g;
 
            // Replace 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:

Example 2: In this example, we will put the URL to variable $1 and the Domain name to $3 after visiting the URL

html

<!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>
        let up = document.getElementById('GFG_UP');
        let down = document.getElementById('GFG_DOWN');
        let text = 'This is https://www.zambiatek.com/';
 
        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
            const 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>