Parsing URLs with JavaScript

Using standard Web APIs one can effortlessly obtain basic information out of a URL from inside the browser but for some more advanced features there are libraries that are much more comprehensive and generally do a better job.

What I mean by parsing a URL is splitting it into relevant parts such as protocol, host and path. If all you need is information about the current URL (the one you would see in the address bar of the browser), browsers implement the Location object type which parses the current URL into the location global object—equivalent to window.location—leaving you with the trivial task of reading the properties of interest to you. Assuming you are on a page with http://www.example.com:8000/path?foo=bar#id as the URL, here are the properties made available on the location object and their corresponding values:

But what if you wanted to parse an arbitrary URL? Well, it turns out that the HTMLAnchorElement type which is your trusty hyperlink element inherits from Location allowing you to read URL components in a similar way:

// First create an anchor element.
var a = document.createElement('a');

// Then set its "href" property to the URL to parse.
a.href = 'http://www.example.com:8000/path?foo=bar#id';

// The URL is now parsed.
console.log(a.pathname); // Will print "/path"

If you want to do more than simple URL parsing though you might want to use one of the available libraries that tackle URLs. One of the most popular ones is URI.js which works in both the browser and Node.js.