The query string in the DOM has always been a bit awkward, why there isn’t a standard method of parsing it is beyond me. The normal route most people follow is to convert it in to a simple array of Key/Value pairs. This allows you to then access the values of the query string using the array accessor syntax.
//domain.com/index.html?key=value var value = querystring_array['key'];
Still a little clumsy isn’t it? Wouldn’t it be great to be able to just retrieve the value from a normal JavaScript/JSON object?
//domain.com/index.html?key=value var value = querystring.key;
It turns out it’s actually quite easy to do this using the JSON object that is available in all modern browsers.
Getting Started
To actually do this, we still need to turn the query string into and array. There are lots of examples out there, but I prefer this method for its simplicity.
First, we need to get the query string value. We do this using the location object and the search property, then using the slice function we remove the 1st character. The first character is always ‘?’.
location.search.slice(1);
Next, we need to split the query string in to an array, we do this using the split function, passing it the ‘&’ character.
var pairs = location.search.slice(1).split('&');
Now using the the array .forEach function we can iterate through the pairs and split them again, this time using the ‘=’ character. We can then populate our result object, the value at index 0 is the key, and the value is at index 1. We also need to check if the value is actually set, as we could have an empty key on the query string. At this point we should also use the decodeURIComponent function to remove any HTML encoding.
var pairs = location.search.slice(1).split('&');
var result = {};
pairs.forEach(function(pair) {
pair = pair.split('=');
result[pair[0]] = decodeURIComponent(pair[1] || '');
});
Converting To JSON
The final step is really easy, all we need to do is use the JSON.stringify method to parse the object, and then call the JSON.parse method to convert it back in to an object.
JSON.parse(JSON.stringify(result));
This final code should look something like this.
function QueryStringToJSON() {
var pairs = location.search.slice(1).split('&');
var result = {};
pairs.forEach(function(pair) {
pair = pair.split('=');
result[pair[0]] = decodeURIComponent(pair[1] || '');
});
return JSON.parse(JSON.stringify(result));
}
var query_string = QueryStringToJSON();
Now we can easily access the query string values. You can see some examples by following the links below: