public
Last active

URI Parsing with Javascript

  • Download Gist
uri.js
JavaScript
1 2 3 4 5 6 7 8 9 10
var parser = document.createElement('a');
parser.href = "http://example.com:3000/pathname/?search=test#hash";
 
parser.protocol; // => "http:"
parser.hostname; // => "example.com"
parser.port; // => "3000"
parser.pathname; // => "/pathname/"
parser.search; // => "?search=test"
parser.hash; // => "#hash"
parser.host; // => "example.com:3000"

This is genius and amazingly simple. Only thing is that when I run through it, parser.host outputs "example.com:3000" with the port included. I was running it in Google Chrome's console…

Ah, good point. Updated gist. Try hostname.

github needs a like and a share button

what about Querystring parameters. Also you can do this with the page's URL using window.location FWIW. Did not think about dropping an anchor on the page for a general url parse though.

This is why I love JavaScript!

if you're looking for something a little more robust (that handles all the querystring stuff pretty reliably), I think this is the canonical best solution: http://blog.stevenlevithan.com/archives/parseuri

@getify What's unreliable about this gist that you need something "a little more robust"?

@dlee

  1. parseURI splits up the query string into a hash/array so you don't have to do your own parsing of it, which is often quite error prone.
  2. parseURI works in non-DOM situations (like web workers, node.js, etc)
  3. if you set a partial URL into a link in the DOM of a browser, it will automatically canonicalize the URL to the page (relative to domain, protocol, etc). This might be what you want, or it might not. You have no choice with links, but parseURI can handle some partial URLs in a standalone way without that automatic behavior (if that's what you need, which I sometimes do).

This is awesomely simple. I use URI.js so I can get an object hash of the query string parameters but this snippet works great for times when you don't want to bring in yet another library.

Try parse jar://xxxxxx in firefox :D

FWIW, Jed Schmidt documented this technique last year during a presentation.

i rolled this trick into a nice 140-byte snippet last year.

Does anyone have a compatibility list for this method? Does it work on all browsers since IE6?

How long has this existed?

This code won't work as-is in IE6, unfortunately (though it does work in IE8, so you may be able to get by as-is, dependent on your minimum version requirements!)

In my experience, setting href on anchor elements dynamically won't work on IE6, as it only processes the href property when running through the HTML parser. I came across a technique a few years ago to do this across all modern browsers by creating a wrapper element and using innerHTML to trigger IE's parser code path:

http://grack.com/blog/2009/11/17/absolutizing-url-in-javascript/

function canonicalize(url) {
    var div = document.createElement('div');
    div.innerHTML = "<a></a>";
    div.firstChild.href = url; // Ensures that the href is properly escaped
    div.innerHTML = div.innerHTML; // Run the current innerHTML back through the parser
    return div.firstChild.href; 
}

:+1: this is simple and elegant!

@jayzeng: it's neither. It's not simple because it requires instantiating DOM elements unnecessarily. It's not elegant because it is unreliable. It is a hack.

I'm trolling at this point, but it's also incorrect because the protocol should be "http", not "http:".

The pathname is pathname/ in ie, while /pathname/ in Chrome.

And it will be /pathname/ if we use document.location.pathname in ie.

Where's the Like button?
/me Likes @rpflorence's comment
RegExp FTW

<a href=.. onmouseover="location=href">lol, html</a>

I added URI.js to @rpflorence's jsperf. Seems to be a decent balance between speed and ease of API consumability.

http://jsperf.com/url-parsing/2

Just a note, got bitten when using this - there are some differences between browser implementations of HTMLAnchorElement@pathname

James Padolsey has fixed some of the inconsistencies mentioned and wrapped it all in a nice function. See http://james.padolsey.com/javascript/parsing-urls-with-the-dom/

This approach not only parses the URL but also resolves it relative to the document/base.

Keep in mind that these definitions may not be consistent with other definitions of the same terms: http://tantek.com/2011/238/b1/many-ways-slice-url-name-pieces

That said, yes, this rocks. :)

I've made a tiny js helper to do that, a year ago https://github.com/MoOx/Url.js

and yet another jsperf fork -- wrapping the regex in a "nicer" return format, almost as good performance: http://jsperf.com/url-parsing/5

In Internet Explorer it appears that if using a relative URL and trying to use parser.hostname it will return a blank string.

See test case here http://jsbin.com/eqoruj/2/edit. If visited in IE you'll see Window: jsbin.com compared to any other browser which shows Parser: jsbin.com.

var parser = document.createElement('a');
parser.href = '/relative/url';
console.log(parser.hostname); // IE = "", Other browsers = window.location.hostname.

You can get around this using

parser.hostname || window.location.hostname

So useful, you just made my day good sir!

This is amazing. Thank you. Is there a way to get the username and password if that was supplied? Like

parser.href = "http://user:pass@www.test.com/";

parser.hostname only returns "www.test.com"

@fetmar from what I can tell there isn't a way to get the username and password using this method. For that try URI.js.

That's a shame, but it doesn't work in IE9... Had to switch back to regexp. Should've read all comments, it would save me 20 minutes debugging... :)

Nice snippet, inspired by your method I built a more complete function for breaking down any string URI to an object with attributes in javascript. Including breaking down the url parameters to a set of key value pairs, accounting for multiple values of a key, and converting parameter types that are numbers back to numbers from string. You can check it out here https://gist.github.com/aymanfarhat/5347921 enjoy!

Wow...this is soo amazing. One of our dev guys has written like 500 line long object to cover all the scenarios for parsing a URI using regex. I guess i will just throw that code away and will be happy to use this and normalize it for all browsers.

How about punycode?

var parser = document.createElement('a');
parser.href = "ололо.рф";
parser.hostname // => lgjclffcjaeimfimpcjkgbojfgehfopl  :(

Code below also works, that might be useful while using postMessage.

parser.origin

I wrote a function that returns object, which contains parameter values in current URL.

https://gist.github.com/sairion/7065921

Found myself using anchor.hostname more frequently and came across this jsperf comparing the number of operations against a regex check - http://jsperf.com/get-hostname-from-url

I dig those gists which i can understand~~~~~~~

Please sign in to comment on this gist.

Something went wrong with that request. Please try again.