Danny Jo

Came across a situation today where it turned out that we will most likely have to use Javascript to extract a few request parameters from the query string in order to pre populate some input fields on a page. Luckily I like a challenge so I started googling, like you do, and found some good pages out there with information about this. Mainly I found a stack overflow question at http://stackoverflow.com/questions/901115/get-query-string-values-in-javascript which was really helpful. I had a read through most of the answers and a lot were really helpful. There seems to be two main ways of going about to solve this particular problem.

First of all you can use a regular expression to parse the query string for key value pairs. This sounds good, why not, well regular expressions tend to be rather slow. The second way of solving this was to use the split() method on the string and split it between the ampersands and then split on the equals. Someone on that stack overflow thread has posted a performance comparison between these two solutions which can be found at http://jsperf.com/querystring-with-javascript

Running the performance tests in my browser (Chrome 14-dev on Windows 7) I can see that the split method is faster than the regular expressions. In fact it told me that the regular expressions were 18% slower.

Anyway, so reading through all these answers in that thread and running the performance tests I decided to write my own little method, of course, and then share my results and findings here in this post. Ok here goes.

var getParameter = function(parameterName) {
    if (window.requestParameters === undefined) {
        window.requestParameters = {};
        var queryString = window.location.search.substring(1);

        if (queryString.length > 0) {
            var i, pairs = queryString.split('&');

            for (i = 0; i < pairs.length; i++) {
                var pair = pairs[i].split('=');
                var key = pair[0].toLowerCase();
                var value = decodeURIComponent(pair[1].replace(/\+/g, " "));

                if (window.requestParameters[key]) {
                    var tempValue = window.requestParameters[key];

                    if (typeof tempValue === 'string') {
                        window.requestParameters[key] = [];
                        window.requestParameters[key].push(tempValue);
                    }

                    window.requestParameters[key].push(value);
                } else {
                    window.requestParameters[key] = value;
                }
            }
        }
    }

    return window.requestParameters[parameterName.toLowerCase()];
};

That’s about it. The above method even supports having multiple parameters with the same name, in that case it will return an array of values for that specific key. It is also case insensitive so it will work no matter what the case of the parameter name is. It will also URI decode the value since the value could contain encoded stuff such as URL’s etc. and it will even take into account the plus (+) which is replaced by a white space.

This method works in such a way that once it has parsed the query parameters it stores them in a global variable called window.requestParameters and any subsequent call to getParameter() will grab the value from that global variable rather than parse the actual query string again, this means that if you want it to reparse the query string you need to set that global to undefined.

That’s it for now, hopefully this will help someone out there who might be in doubt of how to retrieve query parameters using Javascript. If you have any comments or other constructive criticism please feel free to comment on this post. I’m also looking for ideas on what to write about next so if you have any wishes about Javascript or Java stuff you’d like me to explain let me know and I will give it a go.