URL.canParse

Parsing of URLs on the shopper aspect has been a standard observe for twenty years. The early days included utilizing illegible common expressions however the JavaScript specification ultimately advanced right into a new URL technique of parsing URLs. Whereas URL is extremely helpful when a sound URL is supplied, an invalid string will throw an error — yikes! A brand new technique, URL.canParse, will quickly be obtainable to validate URLs!

Offering a malformed URL to new URL will throw an error, so each use of new URL would must be inside a strive/catch block:

// The right, most secure method
strive {
  const url = new URL('https://davidwalsh.title/pornhub-interview');
} catch (e) {
  console.log("Dangerous URL supplied!");
}

// Oops, these are problematic (largely relative URLs)
new URL('/');
new URL('../');
new URL('/pornhub-interview');
new URL('?q=search+time period');
new URL('davidwalsh.title');

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

As you’ll be able to see, strings that might work correctly with an <a> tag generally will not with new URL. With URL.canParse, you’ll be able to keep away from the strive/catch mess to find out URL validity:

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

// Correct utilization
if (URL.canParse('https://davidwalsh.title/pornhub-interview')) {
  const parsed = new URL('https://davidwalsh.title/pornhub-interview');
}

We have come a great distance from cryptic regexes and burner <a> parts to this URL and URL.canParse APIs. URLs characterize a lot greater than location today, so having a dependable API has helped internet builders a lot!