URL.canParse

By  on  

Parsing of URLs on the client side has been a common practice for two decades. The early days included using illegible regular expressions but the JavaScript specification eventually evolved into a new URL method of parsing URLs. While URL is incredibly useful when a valid URL is provided, an invalid string will throw an error -- yikes! A new method, URL.canParse, will soon be available to validate URLs!

Providing a malformed URL to new URL will throw an error, so every use of new URL would need to be within a try/catch block:

// The correct, safest way
try {
  const url = new URL('https://davidwalsh.name/pornhub-interview');
} catch (e) {
  console.log("Bad URL provided!");
}

// Oops, these are problematic (mostly relative URLs)
new URL('/');
new URL('../');
new URL('/pornhub-interview');
new URL('?q=search+term');
new URL('davidwalsh.name');

// Also works
new URL('javascript:;');

As you can see, strings that would work properly with an <a> tag sometimes won't with new URL. With URL.canParse, you can avoid the try/catch mess to determine URL validity:

// Detect problematic URLs
URL.canParse('/'); // false
URL.canParse('/pornhub-interview'); // false
URL.canParse('davidwalsh.name'); //false

// Proper usage
if (URL.canParse('https://davidwalsh.name/pornhub-interview')) {
  const parsed = new URL('https://davidwalsh.name/pornhub-interview');
}

We've come a long way from cryptic regexes and burner <a> elements to this URL and URL.canParse APIs. URLs represent so much more than location these days, so having a reliable API has helped web developers so much!

Recent Features

  • By
    Creating Scrolling Parallax Effects with CSS

    Introduction For quite a long time now websites with the so called "parallax" effect have been really popular. In case you have not heard of this effect, it basically includes different layers of images that are moving in different directions or with different speed. This leads to a...

  • By
    Create a CSS Cube

    CSS cubes really showcase what CSS has become over the years, evolving from simple color and dimension directives to a language capable of creating deep, creative visuals.  Add animation and you've got something really neat.  Unfortunately each CSS cube tutorial I've read is a bit...

Incredible Demos

  • By
    MooTools FontChecker Plugin

    There's a very interesting piece of code on Google Code called FontAvailable which does a jQuery-based JavaScript check on a string to check whether or not your system has a specific font based upon its output width. I've ported this functionality to MooTools. The MooTools...

  • By
    Drag &#038; Drop Elements to the Trash with MooTools 1.2

    Everyone loves dragging garbage files from their desktop into their trash can. There's a certain amount of irony in doing something on your computer that you also do in real life. It's also a quick way to get rid of things. That's...

Discussion

  1. picker

    It doesn’t work in Typescript (with node v22 and @types/node v22) because:
    TS2339: Property ‘canParse’ does not exist on type ‘{ new (url: string | URL, base?: string | URL | undefined): URL; prototype: URL; createObjectURL(obj: Blob | MediaSource):
    string; revokeObjectURL(url: string): void; }’.

Wrap your code in <pre class="{language}"></pre> tags, link to a GitHub gist, JSFiddle fiddle, or CodePen pen to embed!