3 Ways to Parse a Query String in a URL

It’s not too often that a query string needs to be parsed with JavaScript, but that’s definitely not to say that it never happens. For those rare occurrences when you do need to parse the query string on the front end, there are numerous ways to parse a query string into an object with each parameter being a property of that object. In this article, I’ll show you three of those techniques and let you in on a secret of how I’m using these techniques in my own projects.

Getting the Query String

I know the introductory paragraph can be a bit misleading, but the 3 techniques aren’t actually ways to parse the query string itself; they are ways to retrieve the query string from the URL. There is essentially only one technique that I know of and could find to convert a query string into an object. Right now let’s list the three ways to pull the query string from a URL.

1) Use substring and indexOf

If you’ve got a URL as a string, you can simply use a combination of substring and indexOf to pull out the part of the string that contains the query parameters:

var queryString = url.substring( url.indexOf('?') + 1 );

2) Use location‘s properties

If the URL you need to parse is the URL of the page that you are currently on, then the URL is stored right inside of window.location. Better yet, location has a property called search, which will just give you the query string.

var queryString = window.location.search;

Note, though, that the query string returned here has the opening question mark in front of it, so you’ll want to use the following code to get rid of it:

queryString = queryString.substring(1);

3) Use an Anchor Element

In a recent article titled “The Lazy Man’s URL Parsing in JavaScript,” I discussed a method where you created an anchor element that parsed URLs for you. Like location, you can retrieve the query string using the search property. And also like location, you’ll need to remove the leading question mark. I suggest you read the above article to learn how to do this.

Parsing the Query String with JavaScript

Now is when I actually teach you how to parse the query string. Let’s create a function where you send in the query string as a parameter, and the query object is returned.

var parseQueryString = function( queryString ) {
    var params = {}, queries, temp, i, l;

    // Split into key/value pairs
    queries = queryString.split("&");

    // Convert the array of strings into an object
    for ( i = 0, l = queries.length; i < l; i++ ) {
        temp = queries[i].split('=');
        params[temp[0]] = temp[1];
    }

    return params;
};

It really is quite simple. First we just split the string into parts separated by an ampersand. Now we have an array of strings, each of which is in the format “key=value”. So now we just need to separate each of those key-value pairs. We loop through the array of strings that we’ve got and split them too. We then use the first element in that array as the property key, the second element in the array as the value for that key, and add them as a property to our queryObj.

Using This in My Projects

I’m currently creating a project based off of the technique discussed in the post that I mentioned above. It’s a jQuery plugin/standalone library that utilizes that technique to parse URLs for you. Within this plugin/library, I’ve decided to add a few properties to the parser, including a property that contains the parsed query string so you don’t have to parse it yourself. Other than that, this plugin will fix 2 Internet Explorer bugs related to the technique along with giving you a couple additional small features.

Finishing Up

That wraps up today’s post. Look forward to seeing the plugin I mentioned being released on Monday. Also, by then this site should be looking a bit different. The new theme ought to be ready by then and employed live on this site. I hope you enjoy it. Thanks for reading; don’t forget to share. And as always: Happy Coding!

Ad:

Access your Windows applications from anywhere on a hosted Cloud desktop through PCs or Macs or iOS/Android devices. For collaborating with your team mates, try SharePoint Foundation hosting for free.