JavaScript - Validate URL in JS

We will explore different approaches to validating URLs in JavaScript. These approaches include using regular expressions (regex), the URL constructor, and various npm packages. let's see one by one.

All valid URLs follow a particular pattern. They have three main parts, which are:

• Protocol
• Domain name (or IP address)
• Port and path.

1. Using Regular Expression

To validate a URL in JavaScript using a regular expression (regex), we will use the following pattern to match the common URL format in the below example.

function isValid(url) {
    const pattern = /^(https?:\/\/)?([\w-]+\.)+[\w-]+(\/[\w-]*)*$/;
    return pattern.test(url);
}

//Driver Code Starts
console.log(isValid("https://www.example.com"));
console.log(isValid("http://example.com"));  
console.log(isValid("www.example.com"));   
console.log(isValid("invalid-url"));     
//Driver Code Ends

true
true
true
false

Explanation of the Regular Expression we used:

• ^(https?:\/\/)?: Matches an optional http:// or https://.
• ([\da-z.-]+): Matches the domain name (alphanumeric characters, dots, and hyphens).
• \.: Matches the dot before the domain extension.
• ([a-z.]{2,6}): Matches the domain extension (For ex., .com, .org).
• ([\/\w .-]*)*\/?: Matches the optional path, query strings, or fragments.

2. Using URL Object

The URL object in JavaScript provides a built-in way to parse and validate URLs. It is robust, handles complex cases, and doesn't require writing or maintaining custom regular expressions.

function isValid(url) {
    try {
        new URL(url);
        return true;
    } catch (e) {
        return false;
    }
}


//Driver Code Starts
console.log(isValid("https://www.example.com")); 
console.log(isValid("http://example.com"));     
console.log(isValid("www.example.com"));      
console.log(isValid("invalid-url"));         
//Driver Code Ends

true
true
false
false

3. Using npm Packages

There are two npm packages is-url and is-url-http to validate URL. Install the packages with the following command:

npm install is-url
npm install is-url-http

Using is-url npm Packages

import isUrl from 'is-url';
console.log(isUrl("https://www.example.com")); 
console.log(isUrl("http://example.com"));   
console.log(isUrl("www.example.com"));       
console.log(isUrl("invalid-url"));           

Output

true
true
false
false

4. Using is-url-http npm Packages

import isUrlHttp from 'is-url-http';
console.log(isUrlHttp("https://www.example.com"));
console.log(isUrlHttp("http://example.com"));   
console.log(isUrlHttp("www.example.com"));     
console.log(isUrlHttp("invalid-url")); 			 

Output

true
true
false
false