Tuesday, December 3, 2024

URL.canParse


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!

Request Metrics real user monitoring
Request Metrics real user monitoring
Request Metrics real user monitoring
  • Chris Coyier&#8217;s Favorite CodePen Demos

    Chris Coyier’s Favorite CodePen Demos

    David asked me if I’d be up for a guest post picking out some of my favorite Pens from CodePen. A daunting task! There are so many! I managed to pick a few though that have blown me away over the past few months. If you…

  • I&#8217;m an Impostor

    I’m an Impostor

    This is the hardest thing I’ve ever had to write, much less admit to myself.  I’ve written resignation letters from jobs I’ve loved, I’ve ended relationships, I’ve failed at a host of tasks, and let myself down in my life.  All of those feelings were very…

  • Chris Coyier&#8217;s Favorite CodePen Demos

    Chris Coyier’s Favorite CodePen Demos

    David asked me if I’d be up for a guest post picking out some of my favorite Pens from CodePen. A daunting task! There are so many! I managed to pick a few though that have blown me away over the past few months. If you…

  • MooTools Text Flipping

    MooTools Text Flipping

    There are lots and lots of useless but fun JavaScript techniques out there. This is another one of them. One popular April Fools joke I quickly got tired of was websites transforming their text upside down. I found a jQuery Plugin by Paul…


Check out our other content

Check out other tags:

Most Popular Articles