CoffeeScript/Javascript URI parser using the DOM

There are plenty of ways to parse a url in Javascript and I feel like I’ve written the method too many times to keep track. And when I say written, I either mean actually written, or pulled someone’s regex from the net and jammed it into some other wrappers to get the bits that I cared about. The key here is that each time, it was a new endeavor.

The last time I had to solve this problem, I found this gist:

Wow. Super straight forward, and the return value is an object (which I find the biggest failure of the regexp methods).

I took that and wrapped it up into a little tiny module that will easily let me modify the query string params and give me back the URL when I need it. You may notice a couple of if/then kind of checks. I found that Firefox and Chrome don’t quite give back the same results (as noted in the comment stream on the previously mentioned gist). I tried to account for these cases. I’ve tested this on IE8 and it seemed to work just fine.

Note: this is coffee script and depends on underscore. If you try to use this, you either need to handle the coffee script -> js and include underscore in your project or use js2coffee.org and sub out the underscore iterator methods.

To be clear, this method is not fast (check out performance results vs regex at jsperf.com) so if you need to parse piles of urls, this is not for you. This counts on being in a browser context (because it uses document.createElement). If you are working outside of the DOM (like in node.js or server side js), this is not for you. If you only use it a handful of times in an app or on a page, and you want some clean and easy code to read, this may be for you.

Here’s a sample of how you might use it. Take an page url like this

http://myblog.com/blogroll?page=1&style=cool&other_param=whatever

This code:

$('.next_page_button').bind('click', function() {
  var uri_parser = new QueryStringParser(location.href);
  uri_parser.query_params.page = uri_parser.query_params.page + 1;
  window.location.href = uri_parser.toString();
});

will make the .next_page_button take you to page 2 (http://myblog.com/blogroll?page=2&style=cool&other_param=whatever)

We could make a the front page button (where the page attribute is not there) like this.

$('.front_page_button').bind('click', function() {
  var uri_parser = new QueryStringParser(location.href);
  uri_parser.query_params.page = null;
  window.location.href = uri_parser.toString();
});

Until I need this to do some real heavy lifting (read: more performance), I think I may have written my last URL parser in Javascript. Phew.

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s