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
    Create Namespaced Classes with MooTools

    MooTools has always gotten a bit of grief for not inherently using and standardizing namespaced-based JavaScript classes like the Dojo Toolkit does.  Many developers create their classes as globals which is generally frowned up.  I mostly disagree with that stance, but each to their own.  In any event...

  • By
    Responsive Images: The Ultimate Guide

    Chances are that any Web designers using our Ghostlab browser testing app, which allows seamless testing across all devices simultaneously, will have worked with responsive design in some shape or form. And as today's websites and devices become ever more varied, a plethora of responsive images...

Incredible Demos

  • By
    Create a Spinning, Zooming Effect with CSS3

    In case you weren't aware, CSS animations are awesome.  They're smooth, less taxing than JavaScript, and are the future of node animation within browsers.  Dojo's mobile solution, dojox.mobile, uses CSS animations instead of JavaScript to lighten the application's JavaScript footprint.  One of my favorite effects...

  • By
    CSS Ellipsis Beginning of String

    I was incredibly happy when CSS text-overflow: ellipsis (married with fixed width and overflow: hidden was introduced to the CSS spec and browsers; the feature allowed us to stop trying to marry JavaScript width calculation with string width calculation and truncation.  CSS ellipsis was also very friendly to...

Discussion

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