JavaScript Tips: Parse QueryString to Dictionary

The URL Query String is something that is usually just sent to the server-side code and parse there for use in specifying the data to query. A somewhat little known feature of the JavaScript DOM is that the QueryString values are accessible from client-side javaScript code too.

The following code can be used to read what the full QueryString value is from the current pages URL:

var queryString = document.location.search;

Although, the QueryString value can be accessed from JavaScript, it isn't parsed and separated out into any kind of Key/Value pairs automatically. This parsing must be done manually. Below is an example parsing function and it's example usage:

// get raw QueryString value
var queryString = document.location.search;
var dict = parseQueryStringToDictionary(queryString);


// Enumerate through all the Key/Value pairs
// in the Dictionary object
for(var item in dict) {
	var key = item;
	var value = dict[item];
	
	alert('Key: ' + key + '\nValue: ' + value);
}

// Get Value by Key directly
alert(dict['name']);



/* Parse QueryString using String Splitting */
function parseQueryStringToDictionary(queryString) {
	var dictionary = {};
	
	// remove the '?' from the beginning of the
	// if it exists
	if (queryString.indexOf('?') === 0) {
		queryString = queryString.substr(1);
	}
	
	// Step 1: separate out each key/value pair
	var parts = queryString.split('&');
	for(var i = 0; i < parts.length; i++) {
		var p = parts[i];
		// Step 2: Split Key/Value pair
		var keyValuePair = p.split('=');
		// Step 3: Add Key/Value pair to Dictionary object
		var key = keyValuePair[0];
		var value = keyValuePair[1];
		// decode URI encoded string
		value = decodeURIComponent(value);
		value = value.replace(/\+/g, ' ');
		dictionary[key] = value;
	}
	// Step 4: Return Dictionary Object
	return dictionary;
}

Image may be NSFW.
Clik here to view.Image may be NSFW.
Clik here to view.Image may be NSFW.
Clik here to view.Image may be NSFW.
Clik here to view.Image may be NSFW.
Clik here to view.

Image may be NSFW.
Clik here to view.