Query Parameter Parsing Function

I needed a straight (ie. no framework) JavaScript function for parsing query parameters the other day and found one on stack overflow that I liked. Most functions that lookup query parameters, search the url string each time it performs a key lookup. However, the query parameters never change once your JavaScript code starts to run, so it is inefficient and unnecessary to search the query parameters string on each lookup. The lookup function in this article converts the query parameters in to a JavaScript object, so the parameters need only be parsed once.

That said, sometimes developers store query parameter like strings in cookies, the DOM, the URL hash, etc., so you might want to parse a string other than window.location.search or need reparse a string. I have modified the original function to make it more versatile.

Article updated on Jan. 24, 2013

I have turned this widget into a jQuery plugin at jQuery Query Parameter Parser.

How do it…

Here is the query parameter parsing function:

function parseQueryString() {
  // encapsulate variables that need only be defined once
  var pl = /\+/g,  // Regex for replacing addition symbol with a space
    search = /([^&=]+)=+([^&]*)/g,
    decode = function (s) { return decodeURIComponent(s.replace(pl, " ")); };

  // overwrite the function, creating closure of single-use variables
  parseQueryString = function(query) {
    var match,
      o = {};

    if ('?' === query.substring(0, 1)) {
      query  = query.substring(1);
    }

    // each match is a query parameter, add them to the object
    while (match = search.exec(query)) {
      o[decode(match[1])] = decode(match[2]);
    }

    return o;
  }

  return parseQueryString.apply(this, arguments);
}

Here is a singleton function to use, so that the parsing function is only called once to parse the query parameters:

function getQueryParams() {
  var o = parseQueryString(window.location.search);

  getQueryParams = function() {
    return o;
  }

  return getQueryParams();
}

The following jsfiddle will show how these strings are processed by the parseQueryString function:

var t1 = ''; // empty string
var t2 = '?param1=value1'; // no & after ?
var t3 = '?&param1=value1&param2=value2'; // ?& to start
var t4 = '&param1=value1&param2=value2'; // no ?
var t5 = '&param1=value1&&param2==value2'; // extra &, extra =
var t6 = 'value1'; // invalid
var t7 = 'value1&param2=value2'; // invalid mixed with with valid
var t8 = 'param1=value+1+!%40%2B%23%24'; // encoded values and plus

To Test Fiddle

Here are the results:

t1={}
t2={"param1":"value1"}
t3={"param1":"value1","param2":"value2"}
t4={"param1":"value1","param2":"value2"}
t5={"param1":"value1","param2":"value2"}
t6={}
t7={"param2":"value2"}
t8={"param1":"value 1 !@+#$"}

How it works…

The parseQueryString function takes one argument, the string to parse, and returns an object containing the key/value pairs from the parsed query string. I’m using a singleton pattern to encapsulate the three constants (pl, search, decode) inside the function, making them available only through the closure created by the overriding inner function. The core of the function iterates over the matched results from the search regex, which contains two value groups (the key and the value). These key/value pairs are added to the object, until no more are found. The decode function converts any plus symbols back to spaces and decodes any URI encoded values.

I have modified the original regex, so invalid or unset query parameter values are not included in the final object. The stack overflow solution would have included the key, but set its value to empty string ('' in the final object.

The getQueryParams function uses the singleton pattern to create a function that evaluates the query parameters once, using parseQueryString, and then just returns the parsed query parameter object.