URL Regex Javascript Validator

What is URL Regex in JavaScript?

In JavaScript, a URL regex (regular expression) is used to check whether a given string follows the structure of a valid web address. This can include HTTP or HTTPS links, domain names, and optional paths or query parameters. Regex helps developers filter out invalid or malformed links in user input, APIs, and forms.

URL regex patterns are useful for:

• Validating links in forms and user input

• Extracting URLs from text or logs

• Cleaning and processing data in web scraping or automation scripts

• Preventing invalid links from being submitted to servers

What Makes a Valid URL?

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

• Protocol: Specifies the method used to access the resource (e.g., , ).

• Domain name (or IP address): The unique address for the website or resource.

• Port and path (optional): Additional details like the port number () and the specific path or file on the server ().

Common URL Regex Pattern (JavaScript)

A commonly used regex for basic URL validation is:

/^(https?:\/\/)?([\w-]+\.)+[\w-]{2,}(\/[\w\-._~:/?#[\]@!$&'()*+,;=]*)?$/

This pattern checks:

• Optional http or https

• A valid domain name

• An optional path and query string

How to Validate URLs in JavaScript Using Regex

Here’s how you can use regex to validate a URL in JavaScript:

function isValidURL(url) {
  const urlPattern = /^(https?:\/\/)?([\w-]+\.)+[\w-]{2,}(\/[\w\-._~:/?#[\]@!$&'()*+,;=]*)?$/;
  return urlPattern.test(url);
}

// Test
console.log(isValidURL("https://example.com"));           // true
console.log(isValidURL("http://my.site/path?q=1"));       // true
console.log(isValidURL("invalid-url"));                   // false

Examples of Valid and Invalid URLs

Breaking Down URL Validation Approaches

While regex is a popular choice for URL validation, JavaScript actually offers a few different approaches—each with its own benefits:

1. Using Regular Expressions (Regex)

Regex patterns are widely used for quickly checking the structure of URLs. The pattern above checks for:

• An optional or protocol

• One or more valid subdomains and domain names

• A domain extension with at least two characters

• Optional paths, query parameters, or fragments

Regex is great for lightweight validation and easy integration in simple forms or scripts.

2. Using the URL Constructor

JavaScript’s built-in object provides a robust way to validate and parse URLs without writing custom patterns:

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

// Test console.log(isValidURL("https://example.com")); // true console.log(isValidURL("invalid-url")); // false

This method is reliable, handles edge cases, and is recommended when you need comprehensive validation.

3. Leveraging Third-Party Packages

For projects that require more advanced validation (including protocol checks or stricter rules), consider npm packages like is-url or is-url-http:

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

import isUrlHttp from 'is-url-http'; console.log(isUrlHttp("https://example.com")); // true console.log(isUrlHttp("ftp://site.com")); // false

These libraries are especially useful for server-side validation or larger codebases.

Using any of these techniques will help ensure your links are properly formatted and reduce the risk of invalid data making its way into your application. Choose the approach that best fits your use case—regex for quick checks, the object for reliability, or a third-party package for advanced validation needs.

Why Use the URL Object for Validation?

While regex is great for simple pattern checks, JavaScript’s built-in URL object offers a smarter way to validate and handle URLs. Here’s why:

• Accuracy: The URL object follows official URL parsing rules, so it easily handles edge cases and tricky characters that regex often misses.

• Readability: Using the URL object makes your code easier to understand and maintain—no deciphering cryptic regex patterns.

• Error Handling: It throws a clear error if the input isn’t a valid URL, letting you quickly spot and reject malformed addresses.

• Flexibility: Want to extract the hostname, pathname, or query parameters? The URL object lets you access parts of a URL directly, without extra parsing.

For day-to-day form checks or basic input validation, regex does the trick. But when you’re dealing with complex URLs or need bulletproof validation and parsing, reaching for the URL object saves time and reduces headaches.

Validating URLs with the URL Object

Another effective approach for checking if a URL is valid in JavaScript is to use the built-in URL object. This method is straightforward and leverages browser (or Node.js) internals to handle most edge cases for you—no regex required.

Here’s how it works:

• You attempt to create a new URL instance with your string.

• If the string is a well-structured URL, the object gets created successfully.

• If not, JavaScript throws an error, letting you know it’s invalid.

function isValidURL(url) {
  try {
    new URL(url);
    return true;
  } catch (err) {
    return false;
  }
}

Usage Example:

console.log(isValidURL("https://example.com"));        // true
console.log(isValidURL("http://sub.domain.com/path")); // true
console.log(isValidURL("not a url"));                  // false
console.log(isValidURL("ftp:/missing.slashes.com"));   // false

This approach is ideal if you need robust, up-to-date URL validation without maintaining a custom regex. It works well in all modern environments and quickly catches malformed links.

Validating URLs in JavaScript with npm Packages

When you want something more robust than regular expressions, several npm packages make URL validation in JavaScript a breeze. Two popular choices are is-url and is-url-http.

• is-url: This package quickly checks if a string is a valid URL, covering common schemes and formats.

• is-url-http: Useful if you want to confirm specifically that URLs use the http or https protocols.

To get started, install either package from npm:

After installation, use them in your code:

import isUrl from 'is-url';
console.log(isUrl('https://www.example.com')); // true
console.log(isUrl('www.example.com'));         // false

import isUrlHttp from 'is-url-http';
console.log(isUrlHttp('http://example.com'));  // true
console.log(isUrlHttp('ftp://example.com'));   // false

Both tools help catch malformed URLs and reduce false positives, making them handy allies for any project dealing with dynamic or user-submitted links.

Validating URLs with the is-url-http Package

If you prefer something even easier than rolling your own regex, there’s an npm package called is-url-http that makes validation a breeze—particularly handy when you want to enforce HTTP and HTTPS only.

How to Use

1. Install the package:
   Open your terminal and run:

2. Import and use in your JavaScript:

   import isUrlHttp from 'is-url-http';
   
   // Examples
   isUrlHttp("https://www.example.com"); // returns true
   isUrlHttp("http://example.com");      // returns true
   isUrlHttp("www.example.com");         // returns false
   isUrlHttp("invalid-url");             // returns false

This utility saves you from writing complex regular expressions when you only need to support HTTP(S) protocols. Just pass in a string and get a simple true/false result—no extra fuss.

You’ll find is-url-http especially useful for validating URLs submitted via forms or APIs, so you immediately filter out malformed links before storing or processing them.

Validating URLs with the is-url NPM Package

If you prefer not to write or manage your own regular expressions, you can also use a package like is-url to quickly check whether a string is a valid URL. This is handy for projects where you need reliability and minimal fuss.

Here’s a quick example of how to use is-url in your JavaScript project:

import isUrl from 'is-url';

console.log(isUrl("https://www.example.com")); // true
console.log(isUrl("http://example.com"));      // true
console.log(isUrl("www.example.com"));         // false
console.log(isUrl("invalid-url"));             // false

• Returns true for fully qualified HTTP or HTTPS URLs.

• Returns false for partial, malformed, or non-URL strings.

This approach helps simplify validation logic, especially when you’re dealing with high volumes of user-submitted URLs or batch-processing data.

Pro Tips for Using URL Regex in JavaScript

• Use non-capturing groups when you don’t need to extract sub-matches. It improves performance.

• Combine this with the JavaScript Regex Tester to test complex patterns interactively.

• Avoid overly strict patterns—some valid URLs might be blocked unintentionally.

• Normalize input before validation (e.g., trimming whitespaces).

• Pair it with tools like the Token Generator to validate URLs containing access tokens or the Base64 Encoder for secure URL components.

Regex Metacharacters Used 

• ^ : Anchors the match at the start of the string

• $ : Anchors the match at the end of the string

• ? : Marks the preceding token as optional

• () : Capturing group

• (?:): Non-capturing group

• [] : Character set

• . : Matches any character except newline

• + : Matches one or more occurrences

• * : Matches zero or more occurrences

• \/ : Escaped slash (for path components)

Combine with These Tools

• JavaScript Regex Tester – Live test any pattern.

• Token Generator – Validate tokenized URL parameters.

• Base64 Encoder – Encode data inside URLs.

• UUID Regex JavaScript Validator – Match UUIDs used in RESTful URLs.

• Email Regex JavaScript Validator – Validate email addresses often linked in forms.

• Phone Number Regex JavaScript Validator – For contact forms that include phone and URL fields.