How to Check if a String is a URL in JavaScript

Validating whether a string is a URL is a common requirement in web development. This guide will walk you through several methods to check if a string is a valid URL in JavaScript, complete with detailed explanations and code examples.

function isValidURL(str) {
    let pattern = new RegExp('^(https?:\\/\\/)?'+ // protocol
      '((([a-z\\d]([a-z\\d-]*[a-z\\d])*)\\.?)+[a-z]{2,}|'+ // domain name
      '((\\d{1,3}\\.){3}\\d{1,3}))'+ // OR ip (v4) address
      '(\\:\\d+)?(\\/[-a-z\\d%_.~+]*)*'+ // port and path
      '(\\?[;&a-z\\d%_.~+=-]*)?'+ // query string
      '(\\#[-a-z\\d_]*)?$','i'); // fragment locator
    return !!pattern.test(str);
}

console.log(isValidURL("https://www.example.com")); // true
console.log(isValidURL("not-a-url")); // false

To quickly check if a string is a URL in JavaScript, use a regular expression:

Determining if a string is a valid URL is essential in many web development scenarios, such as input validation, form submissions, and URL processing. There are multiple approaches to check if a string is a valid URL, each with its strengths and weaknesses. This guide will explore the most common methods and provide practical examples.

Using Regular Expressions

Regular expressions (regex) are a powerful tool for pattern matching in strings. You can use a regex pattern to verify whether a string matches the format of a URL.

Example 1: Using Regular Expressions

function isValidURL(str) {
    let pattern = new RegExp('^(https?:\\/\\/)?'+ // protocol
      '((([a-z\\d]([a-z\\d-]*[a-z\\d])*)\\.?)+[a-z]{2,}|'+ // domain name
      '((\\d{1,3}\\.){3}\\d{1,3}))'+ // OR ip (v4) address
      '(\\:\\d+)?(\\/[-a-z\\d%_.~+]*)*'+ // port and path
      '(\\?[;&a-z\\d%_.~+=-]*)?'+ // query string
      '(\\#[-a-z\\d_]*)?$','i'); // fragment locator
    return !!pattern.test(str);
}

console.log(isValidURL("https://www.example.com")); // true
console.log(isValidURL("not-a-url")); // false

Explanation:

• The RegExp constructor builds a regular expression pattern that matches common URL structures.
• The test() method checks if the input string matches the pattern, returning true if it does and false otherwise.

Using the URL Constructor

The URL constructor is a built-in JavaScript object that can be used to parse a string as a URL. If the string is not a valid URL, the constructor will throw an error, which you can catch and handle.

Example 2: Using the URL Constructor

function isValidURL(str) {
    try {
        new URL(str);
        return true;
    } catch (_) {
        return false;
    }
}

console.log(isValidURL("https://www.example.com")); // true
console.log(isValidURL("not-a-url")); // false

Explanation:

• new URL(str) attempts to create a URL object from the string.
• If the string is a valid URL, the object is created successfully, and the function returns true.
• If the string is not a valid URL, an error is thrown, and the function catches it, returning false.

Using try and catch

Another method to validate URLs is by leveraging try and catch blocks with the URL constructor, which allows you to gracefully handle invalid URLs.

Example 3: Using try and catch

function isValidURL(str) {
    try {
        let url = new URL(str);
        return true;
    } catch (e) {
        return false;
    }
}

console.log(isValidURL("https://www.example.com")); // true
console.log(isValidURL("not-a-url")); // false

Explanation:

• The try block attempts to create a URL object. If successful, the string is a valid URL.
• The catch block handles any errors, indicating that the string is not a valid URL.

Conclusion

Validating whether a string is a URL in JavaScript can be achieved using various methods. Regular expressions provide flexibility and control, while the URL constructor and try–catch block offer a more straightforward approach with built-in JavaScript features. Depending on your specific use case, you can choose the method that best suits your needs. Understanding these techniques will help you ensure that URLs are handled correctly in your web applications, improving both functionality and security.