How to Check if a String Contains a Valid URL Format in JavaScript ?

A string containing a valid URL format adheres to standard conventions, comprising a scheme (e.g., "https://" or "https://"), domain, and optionally, a path, query parameters, and fragments. Ensuring this format is crucial for data consistency and accurate handling of URLs in applications.

There are several methods that can be used to check if a string contains a valid URL format in JavaScript.

We will explore all the above methods along with their basic implementation with the help of examples.

Approach 1: Using Regular Expressions

Regular expressions are a powerful tool to match patterns in strings. We can use a regular expression to check if the string follows the valid URL format.

Syntax:

const urlPattern = /^(https?|ftp):\/\/[^\s/$.?#].[^\s]*$/i;

Example: In this example, the isValidURL function uses a regex pattern to validate URLs. It returns true for valid URLs, and false otherwise.

function isValidURL(url) {
    const urlPattern = /^(https?|ftp):\/\/[^\s/$.?#].[^\s]*$/i;
    return urlPattern.test(url);
}

console.log(isValidURL(
    "https://www.geeksforgeeks.org/"));
console.log(isValidURL(
    "https://www.geeksforgeeks.org/community/"));
console.log(isValidURL("invalid-url"));

true
true
false

Approach 2: Using URL Constructor

URL constructor in JavaScript creates a URL object, checks if given string is a valid URL; throws error otherwise.

Syntax:

try {
    new URL(url);
    return true;
} catch (error) {
    return false;
}

Example: In this example, the function uses the URL API to validate URLs. It returns true if valid, false otherwise.

function isValidURL(url) {
    try {
        new URL(url);
        return true;
    } catch (error) {
        return false;
    }
}
console.log(isValidURL(
    "https://www.geeksforgeeks.org/"));
console.log(isValidURL(
   "https://www.geeksforgeeks.org/community/"));
console.log(isValidURL("invalid-url")); 

true
true
false

Approach 3: Using the URL Object Available in Modern Browsers

Modern browsers provide an URL object that can parse a URL string and validate it. This method is generally more reliable and less error-prone.

Syntax:

const urlObject = new URL(url);

Example: In this example, we are using the above-explained approach.

function isValidURL(url) {
    try {
        const urlObject = new URL(url);
        
        // Additional checks, if necessary.
        return true;
    } catch (error) {
        return false;
    }
}
console.log(isValidURL(
    "https://www.geeksforgeeks.org/"));
console.log(isValidURL(
    "https://www.geeksforgeeks.org/community/"));
console.log(isValidURL("invalid-url"));

true
true
false

Approach 4: Using a Library (validator.js)

To check if a string contains a valid URL format using the validator.js library, first install the library using npm. Then, use the validator.isURL() method to validate the URL.

npm install validator

Example:

const validator = require('validator');

function isValidURL(str) {
  return validator.isURL(str);
}

console.log(isValidURL("https://www.geeksforgeeks.org/")); // true
console.log(isValidURL("example")); // false

Output

true
false