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

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

// The proper, most secure means
strive {
  const url = new URL('https://davidwalsh.identify/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.identify');

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

As you may see, strings that might work correctly with an <a> tag typically will not with new URL. With URL.canParse, you may 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.identify'); //false

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

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

  • Creating Scrolling Parallax Effects with CSS

    Introduction For fairly a very long time now web sites with the so known as “parallax” impact have been actually well-liked. In case you haven’t heard of this impact, it mainly consists of totally different layers of photos which can be shifting in several instructions or with totally different velocity. This results in a…

  • Conquering Impostor Syndrome

    Two years in the past I documented my struggles with Imposter Syndrome and the response was immense.  I acquired messages of assist and commiseration from new internet builders, veteran engineers, and even individuals of all expertise ranges in different professions.  I’ve even caught myself studying the put up…

  • CSS Scoped Styles

    There are many superior new attributes we have gotten in the course of the HTML5 revolution:  placeholder, obtain, hidden, and extra.  Every of those attributes gives us a special stage of management over a component on the web page, however there is a new aspect attribute that permits…

  • JavaScript Battery API


Please enter your comment!
Please enter your name here