Check if a JavaScript string is a URL

javascript

url-validation

regex-patterns

url-encoding

byAnton Shumikhin·Aug 30, 2024

Here's a quick and clean way to check if a string is a URL:

const isValidUrl = (str) => {
  try { 
    // Even URLs need some quality assurance checks!
    return !!new URL(str);
  }
  catch (_) { 
    // Oops, that URL just tripped
    return false;
  }
};

// Let's see if this example URL can run the gauntlet
console.log(isValidUrl("https://example.com")); // Outputs true or false

This approach uses the URL constructor and is efficient and regex-free. It's an easy plug-and-play function using JavaScript's built-in URL API.

In-Depth a.k.a Behind the scenes

The script above employs the URL constructor to evaluate URLs in compliance with the RFC 3986 standard. When an invalid URL or string is given, the constructor throws an exception, which we charmingly catch and return as false.

In cases where URL structures might be atypical (like example.com without http), it’s beneficial to add supplementary validations for relative paths or protocol-less URLs - a common occurrence in user-generated content or anywhere with variety in inputs.

Level Up: Extreme URL conditions

Regex: The URL Ninja

For the more variant, detailed and particular use cases where you want to validate a complex pool of URLs, a RegExp pattern would be a more reliable paladin. Using RegExp patterns allow handling various nuances of URL configurations, like prefixes, subdomains, and extensions.

Machiavellian URL structures and JS RegEx to the rescue

With exotic URL structures that factor in username, password, port, query parameters, or fragments, JavaScript RegExp can bring a more robust solution:

const regex = /^(https?:\/\/)?([\da-z\.-]+)\.([a-z\.]{2,6})([\/\w \.-]*)*\/?$/;
const isValidComplexUrl = (url) => regex.test(url);

// Time for a big catch, the Moby Dick of URLs!
console.log(isValidComplexUrl("https://user:[email protected]:8080/search?q=javascript#start")); // true

Don't fall in the trap!

The imposter: The URL object may attribute properties like href and hostname even for invalid URLs by treating them as relative links, leading to false positives.
Written in foreign tongue: Domains with non-ASCII characters may require punycode conversion.
The rebellious one: Some URLs may exclude the HTTP or HTTPS scheme (like //example.com). Make sure your validation is ready for such mischief.

Going "regex-free"

An open market of possibilities

Many web projects use frameworks or JavaScript libraries which provide out-of-the-box functionalities for URL handling. For simplicity and robustness, consider using methods from these existing solutions.

The sneaky ones

The URL constructor is brilliant for standard situations, but needs a sharper eye for subtle miscreants. Look out for URLs embedded within texts, malformed URLs, and ones with less common protocols like ftp:, or mailto:.

When in doubt, test then tweak

A comprehensive test suite

Craft a diverse number of real and imaginary URLs for testing. Add in just enough spices like short URLs (goo.gl), international domains, and protocol-relative URLs.

Special attention to special characters

Ensure your validation method can identify and handle special characters and query parameters. Dealing correctly with URL encoding and decoding can make the difference between a well-prepared URL analysis tool and a clunky one.

explain-codes / Javascript / Check if a JavaScript string is a URL

Linked

Encode URL in JavaScript



Http URL Address Encoding in Java



Do I encode ampersands in <a href...>?



Convert String to Uri



Css attribute selector does not work a href

