How to replace plain URL with link using JavaScript ?

Last Updated : 02 Aug, 2023

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.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
            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:

Animation 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.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
            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>