Getting all query string values from a URL with vanilla JavaScript

A few years ago, I shared a method for getting the value of a query string from a URL.

I recently learned of a technique you can use to get all query string parameters and push them into an object of key/value pairs, courtesy of CSS Tricks.

/**
 * Get the URL parameters
 * source: https://css-tricks.com/snippets/javascript/get-url-variables/
 * @param  {String} url The URL
 * @return {Object}     The URL parameters
 */
var getParams = function (url) {
	var params = {};
	var parser = document.createElement('a');
	parser.href = url;
	var query = parser.search.substring(1);
	var vars = query.split('&');
	for (var i = 0; i < vars.length; i++) {
		var pair = vars[i].split('=');
		params[pair[0]] = decodeURIComponent(pair[1]);
	}
	return params;
};

You’d use it like this.

// Get parameters from the current URL
getParams(window.location.href);

// Get parameters from a URL string
var url = 'https://gomakethings.com?sandwhich=chicken%20salad&bread=wheat';
getParams(url);

How it works

First, we set up an object to push our parameters into.

var params = {};

We need to get the query string portion of our URL. To do that, we create a link, assign our URL as it’s href value, and then grab the search portion (ie. the query string) of the URL.

var parser = document.createElement('a');
parser.href = url;
var query = parser.search.substring(1);

Next, we split our string into an array, using the & symbol as our delimiter. Each item in the array will be a separate key/value pair.

var vars = query.split('&');

Then, we’ll loop through each item, splitting it into another array at the = symbol. The first item in our array is the key. The second is the value.

We’ll run our value through decodeURIComponent() to get a proper string, and push the key and value to our params object.

for (var i=0; i < vars.length; i++) {
	var pair = vars[i].split('=');
	params[pair[0]] = decodeURIComponent(pair[1]);
}

Finally, we’ll return the object of key/value pairs.

return params;

Browser Compatibility

This works in all modern browsers, and back to at least IE6.