Skip to content


Parsing of URLs at the shopper facet has been a not unusual observe for twenty years. The early days incorporated the usage of illegible common expressions however the JavaScript specification sooner or later developed right into a new URL approach of parsing URLs. Whilst URL is extremely helpful when a sound URL is equipped, an invalid string will throw an error — yikes! A brand new approach, URL.canParse, will quickly be to be had to validate URLs!

Offering a malformed URL to new URL will throw an error, so each use of new URL would wish to be inside of a take a look at/catch block:

// The proper, most secure means
take a look at {
  const url = new URL('https://davidwalsh.title/pornhub-interview');
} catch (e) {
  console.log("Unhealthy URL equipped!");

// Oops, those are problematic (most commonly relative URLs)
new URL('/');
new URL('../');
new URL('/pornhub-interview');
new URL('?q=seek+time period');
new URL('davidwalsh.title');

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

As you’ll see, strings that might paintings correctly with an <a> tag every now and then may not with new URL. With URL.canParse, you’ll keep away from the take a look at/catch mess to resolve URL validity:

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

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

We have now come some distance from cryptic regexes and burner <a> parts to this URL and URL.canParse APIs. URLs constitute so a lot more than location in this day and age, so having a competent API has helped internet builders such a lot!

  • 5 More HTML5 APIs You Didn&#8217;t Know Existed

    The HTML5 revolution has equipped us some superior JavaScript and HTML APIs.  Some are APIs we knew we now have wanted for years, others are leading edge cellular and desktop helpers.  Without reference to API power or goal, the rest to assist us higher do our task is a…

  • Chris Coyier&#8217;s Favorite CodePen Demos

    David requested me if I would be up for a visitor put up choosing out a few of my favourite Pens from CodePen. A frightening process! There are such a large amount of! I controlled to select a couple of even though that experience blown me away over the last few months. If you happen to…

  • Multiple File Upload Input

    Extra ceaselessly than no longer, I to find myself short of to add a couple of document at a time.  Having to make use of a couple of “document” INPUT parts is stressful, sluggish, and inefficient.  And if I hate them, I will be able to’t consider how frustrated my customers can be.  Thankfully Safari, Chrome…

  • MooTools Clipboard Plugin

    The facility to put content material right into a person’s clipboard may also be extraordinarily handy for the person. As an alternative of clicking and dragging down what is usually a long record, the person can replica the contents of a selected house by means of a unmarried click on of a mouse.

Ready to get a best solution for your business?