JavaScript Tips: Parse QueryString to Dictionary

Sep 25, 2015 • Javascript

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('&amp;');
	
	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;
}