Home Software Development URL.canParse



Parsing of URLs on the shopper aspect has been a typical follow for 20 years. The early days included utilizing illegible common expressions however the JavaScript specification finally 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 accessible 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 means
strive {
  const url = new URL('https://davidwalsh.title/pornhub-interview');
} catch (e) {
  console.log("Dangerous URL supplied!");

// Oops, these are problematic (principally 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 may work correctly with an <a> tag typically 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 good 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 net builders a lot!

  • Being a Dev Dad

    I get requested a great deal of questions day by day however I am all the time shocked that they are not often questions on code and even tech — most of the questions I get are extra about non-dev stuff like what my workplace is like, what software program I exploit, and oftentimes…

  • CSS @supports

    Characteristic detection through JavaScript is a shopper aspect finest follow and for all the appropriate causes, however sadly that very same performance hasn’t been accessible inside CSS.  What we find yourself doing is repeating the identical properties a number of occasions with every browser prefix.  Yuck.  One other factor we…

  • Translate Content with the Google Translate API and JavaScript

    Notice:  For this tutorial, I am utilizing version1 of the Google Translate API.  A more moderen REST-based model is out there. In a great world, all web sites would have a characteristic that allowed the consumer to translate a web site into their native language (or much more ideally, translation can be…

  • Chris Coyier&#8217;s Favorite CodePen Demos II

    Hey everybody! Earlier than we get began, I simply need to say it is rattling onerous to choose this few favorites on CodePen. Not as a result of, as a co-founder of CodePen, I really feel like a dad choosing which child he likes finest (RUDE). However as a result of there may be simply so…



Please enter your comment!
Please enter your name here