Cross-browser Query Parameter Getter and Setter

on in Methods, Events and Scopes
Last modified on

Here’s a cross-browser compatible way of getting query parameter from a URL or setting query parameters and reloading the page. An alternate way would be to fetch something based on the parameters and then push the parameters to history.

function getQueryParameters() {
    var queryString =,
        params = {};

    queryString.replace(/([^=]*)=([^&]*)&*/g, function (_, key, value) {
        params[key] = value;

    return params;

function setQueryParameters(params) {
    var query = [],

    for (key in params) {
        if (!params.hasOwnProperty(key)) {
        value = params[key];
        query.push(key + "=" + value);
    } = query.join("&");

The example below will show you how to use the functions. Let’s assume you want a <select&gt; dropdown to trigger an event, in our case a page reload.

document.getElementById('selector').addEventListener('change', function () {
    var params = getQueryParameters(),
        selectedParameter = this.value;

    params.my_parameter = selectedParameter;

And that’s it! You’ve done it!

Related posts