The Easiest Way to Parse URLs with JavaScript
A very clever hack to parse a structured URL object is to create a <a>
element and set its href
to the URL you want to parse.
You can then query the <a>
element for its components like schema, hostname, port, pathname, query, hash:
Copyvar parser = document.createElement('a'); parser.href = 'http://heise.de/bar'; parser.hostname; // => 'heise.de' pathname = parser.pathname; // => '/bar' if (pathname[0] != '/') pathname = '/' + pathname // Fix IE11
One advantage vs. calling new URL(...)
is that it works with incomplete URLs. So if all you have is /path
it will fill in the hostname, protocol, etc. with data from the current page (as any <a>
tag would do):
Copyvar parser = document.createElement('a'); parser.href = 'foo'; // set the URL you want to parse (resolving relative paths in the context of the current URL) parser.hostname; // => "makandracards.com" parser.pathname; // => "/makandra/29377-the-easiest-way-to-parse-urls-with-javascript/foo" if (pathname[0] != '/') pathname = '/' + pathname // Fix IE11
Caveat: IE11 will return the pathname without leading slash. Make to employ the fix as noted above.
If you use Unpoly you may also use up.util.parseUrl()
, which implements the technique in this card with tests and all caveats fixed.
Related topic: Javascript: Read params from url.