Skip to main content Accessibility Feedback

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.


🚀 Make 2018 the year you master JavaScript! My pocket guides and mini courses are short, focused, and made for beginners. You can do this!

Have any questions or comments about this post? Email me at chris@gomakethings.com or contact me on Twitter at @ChrisFerdinandi.

Get Daily Developer Tips