How to validate URL using regular expression in JavaScript?

0 0 1 minute read

Given a URL, the task is to validate it. Here we are going to declare a URL valid or Invalid by matching it with the JavaScript RegExp. We’re going to discuss a few methods.

Example 1: This example validates the URL = ‘https://www.zambiatek.com’ by using Regular Expression.

html

<h1 style="color:green;">
    GeeksForGeeks
</h1>
<p id="GFG_UP" style="font-size: 15px;
                      font-weight: bold;">
</p>
<button onclick="gfg_Run()">
    click here
</button>
<p id="GFG_DOWN" style="color:green;
                        font-size: 20px;
                        font-weight: bold;">
</p>
<script>
    var el_up = document.getElementById("GFG_UP");
    var el_down = document.getElementById("GFG_DOWN");
     
    var expression =
/[-a-zA-Z0-9@:%_\+.~#?&//=]{2,256}\.[a-z]{2,4}\b(\/[-a-zA-Z0-9@:%_\+.~#?&//=]*)?/gi;
    var regex = new RegExp(expression);
    var url = 'www.zambiatek.com';
    el_up.innerHTML = "URL = '" + url + "'";
     
    function gfg_Run() {
        var res = "";
        if (url.match(regex)) {
            res = "Valid URL";
        } else {
            res = "Invalid URL";
        }
        el_down.innerHTML = res;
    }
</script>

Output:

Validate URL using regular expression

Example 2: This example validates the URL = ‘https://www.zambiatekorg'(Which is wrong) by using different Regular Expression than previous one.

html

<h1 style="color:green;">
    GeeksForGeeks
</h1>
<p id="GFG_UP" style="font-size: 15px;
                        font-weight: bold;">
</p>
<button onclick="gfg_Run()">
    click here
</button>
<p id="GFG_DOWN" style="color:green;
                        font-size: 20px;
                        font-weight: bold;">
</p>
<script>
    var el_up = document.getElementById("GFG_UP");
    var el_down = document.getElementById("GFG_DOWN");
     
    var expression =
/(https?:\/\/(?:www\.|(?!www))[a-zA-Z0-9][a-zA-Z0-9-]+[a-zA-Z0-9]\.[^\s]{2,}|www\.[a-zA-Z0-9][a-zA-Z0-9-]+[a-zA-Z0-9]\.[^\s]{2,}|https?:\/\/(?:www\.|(?!www))[a-zA-Z0-9]+\.[^\s]{2,}|www\.[a-zA-Z0-9]+\.[^\s]{2,})/gi;
    var regex = new RegExp(expression);
    var url = 'www.geekforzambiatekorg';
    el_up.innerHTML = "URL = '" + url + "'";
     
    function gfg_Run() {
        var res = "";
        if (url.match(regex)) {
            res = "Valid URL";
        } else {
            res = "Invalid URL";
        }
        el_down.innerHTML = res;
    }
</script>