Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
jQuery.parseParams - parse query string paramaters into an object
/**
* $.parseParams - parse query string paramaters into an object.
*/
(function($) {
var re = /([^&=]+)=?([^&]*)/g;
var decodeRE = /\+/g; // Regex for replacing addition symbol with a space
var decode = function (str) {return decodeURIComponent( str.replace(decodeRE, " ") );};
$.parseParams = function(query) {
var params = {}, e;
while ( e = re.exec(query) ) {
var k = decode( e[1] ), v = decode( e[2] );
if (k.substring(k.length - 2) === '[]') {
k = k.substring(0, k.length - 2);
(params[k] || (params[k] = [])).push(v);
}
else params[k] = v;
}
return params;
};
})(jQuery);
@msmrz

This comment has been minimized.

Copy link

@msmrz msmrz commented May 5, 2011

Could you provide some example? ... doesn't work for me...

@kares

This comment has been minimized.

Copy link
Owner Author

@kares kares commented May 5, 2011

it's the reverse of jQuery.param - thus only params should be passed :

var url = 'www.example.com?ferko=suska&ee=huu';
$.parseParams( url.split('?')[1] || '' ); // object { ferko: 'suska', ee: 'huu' }
@EliotBrown

This comment has been minimized.

Copy link

@EliotBrown EliotBrown commented Jun 1, 2012

Would be interesting to handle arrays as well like :

var url = '..?ferko=suska&ee=huu&topics[]=seo&topics[]=php'; // object { ferko: 'suska', ee: 'huu', topics:['seo', 'php'] }

@jalfcolombia

This comment has been minimized.

Copy link

@jalfcolombia jalfcolombia commented Mar 15, 2013

Excellent, thank you very much

@timvasil

This comment has been minimized.

Copy link

@timvasil timvasil commented Mar 21, 2013

Here's a version that parses duplicate keys into an array without using a [] suffix on the key, and also handles a leading "?" so you can pass "document.location.search" as an argument.

(function($) {
    var re = /([^&=]+)=?([^&]*)/g;
    var decode = function(str) {
        return decodeURIComponent(str.replace(/\+/g, ' '));
    };
    $.parseParams = function(query) {
        var params = {}, e;
        if (query) {
            if (query.substr(0, 1) == '?') {
                query = query.substr(1);
            }

            while (e = re.exec(query)) {
                var k = decode(e[1]);
                var v = decode(e[2]);
                if (params[k] !== undefined) {
                    if (!$.isArray(params[k])) {
                        params[k] = [params[k]];
                    }
                    params[k].push(v);
                } else {
                    params[k] = v;
                }
            }
        }
        return params;
    };
})(jQuery);
@lewislacook

This comment has been minimized.

Copy link

@lewislacook lewislacook commented Dec 6, 2013

Very useful! Been looking for something like this.

@prakashnsm

This comment has been minimized.

Copy link

@prakashnsm prakashnsm commented Feb 19, 2014

very good, its really useful thanks

@Komrod

This comment has been minimized.

Copy link

@Komrod Komrod commented Mar 14, 2014

I have upgraded the script, it now handles nested objects, array with and without index ...
Fiddle: http://jsfiddle.net/v92Pv/23/

// Add an URL parser to JQuery that returns an object
// This function is meant to be used with an URL like the window.location
// Use: $.parseParams('http://mysite.com/?var=string') or $.parseParams() to parse the window.location
// Simple variable:  ?var=abc                        returns {var: "abc"}
// Simple object:    ?var.length=2&var.scope=123     returns {var: {length: "2", scope: "123"}}
// Simple array:     ?var[]=0&var[]=9                returns {var: ["0", "9"]}
// Array with index: ?var[0]=0&var[1]=9              returns {var: ["0", "9"]}
// Nested objects:   ?my.var.is.here=5               returns {my: {var: {is: {here: "5"}}}}
// All together:     ?var=a&my.var[]=b&my.cookie=no  returns {var: "a", my: {var: ["b"], cookie: "no"}}
// You just cant have an object in an array, ?var[1].test=abc DOES NOT WORK
(function ($) {
    var re = /([^&=]+)=?([^&]*)/g;
    var decode = function (str) {
        return decodeURIComponent(str.replace(/\+/g, ' '));
    };
    $.parseParams = function (query) {
        // recursive function to construct the result object
        function createElement(params, key, value) {
            key = key + '';
            // if the key is a property
            if (key.indexOf('.') !== -1) {
                // extract the first part with the name of the object
                var list = key.split('.');
                // the rest of the key
                var new_key = key.split(/\.(.+)?/)[1];
                // create the object if it doesnt exist
                if (!params[list[0]]) params[list[0]] = {};
                // if the key is not empty, create it in the object
                if (new_key !== '') {
                    createElement(params[list[0]], new_key, value);
                } else console.warn('parseParams :: empty property in key "' + key + '"');
            } else
            // if the key is an array    
            if (key.indexOf('[') !== -1) {
                // extract the array name
                var list = key.split('[');
                key = list[0];
                // extract the index of the array
                var list = list[1].split(']');
                var index = list[0]
                // if index is empty, just push the value at the end of the array
                if (index == '') {
                    if (!params) params = {};
                    if (!params[key] || !$.isArray(params[key])) params[key] = [];
                    params[key].push(value);
                } else
                // add the value at the index (must be an integer)
                {
                    if (!params) params = {};
                    if (!params[key] || !$.isArray(params[key])) params[key] = [];
                    params[key][parseInt(index)] = value;
                }
            } else
            // just normal key
            {
                if (!params) params = {};
                params[key] = value;
            }
        }
        // be sure the query is a string
        query = query + '';
        if (query === '') query = window.location + '';
        var params = {}, e;
        if (query) {
            // remove # from end of query
            if (query.indexOf('#') !== -1) {
                query = query.substr(0, query.indexOf('#'));
            }

            // remove ? at the begining of the query
            if (query.indexOf('?') !== -1) {
                query = query.substr(query.indexOf('?') + 1, query.length);
            } else return {};
            // empty parameters
            if (query == '') return {};
            // execute a createElement on every key and value
            while (e = re.exec(query)) {
                var key = decode(e[1]);
                var value = decode(e[2]);
                createElement(params, key, value);
            }
        }
        return params;
    };
})(jQuery);
@Komrod

This comment has been minimized.

Copy link

@Komrod Komrod commented Mar 14, 2014

And also, a function that converts object to URL is handy :-)
Fiddle: http://jsfiddle.net/cADUU/4/

// Encode an object to an url string
// This function return the search part, begining with "?"
// Use: $.encodeURL({var: "test", len: 1}) returns ?var=test&len=1
(function ($) {
    $.encodeURL = function (object) {

        // recursive function to construct the result string
        function createString(element, nest) {
            if (element === null) return '';
            if ($.isArray(element)) {
                var count = 0,
                    url = '';
                for (var t = 0; t < element.length; t++) {
                    if (count > 0) url += '&';
                    url += nest + '[]=' + element[t];
                    count++;
                }
                return url;
            } else if (typeof element === 'object') {
                var count = 0,
                    url = '';
                for (var name in element) {
                    if (element.hasOwnProperty(name)) {
                        if (count > 0) url += '&';
                        url += createString(element[name], nest + '.' + name);
                        count++;
                    }
                }
                return url;
            } else {
                return nest + '=' + element;
            }
        }

        var url = '?',
            count = 0;

        // execute a createString on every property of object
        for (var name in object) {
            if (object.hasOwnProperty(name)) {
                if (count > 0) url += '&';
                url += createString(object[name], name);
                count++;
            }
        }

        return url;
    };
})(jQuery);
@ghost

This comment has been minimized.

Copy link

@ghost ghost commented May 20, 2014

$.parseParams('http://mysite.com/?form[name]=test'); // form[0].NaN = test

@Qantas94Heavy

This comment has been minimized.

Copy link

@Qantas94Heavy Qantas94Heavy commented May 25, 2014

If this is used this in a project, do you have any licence or attribution requirements?

@sokool

This comment has been minimized.

Copy link

@sokool sokool commented Jan 22, 2015

@DimitryPHP have you solved that?

@kapoormanish

This comment has been minimized.

Copy link

@kapoormanish kapoormanish commented Mar 24, 2015

Thanks Kares, it helps.

@scottwalters

This comment has been minimized.

Copy link

@scottwalters scottwalters commented Jul 2, 2015

Using this to fake up a $.serializeObject() for want of one. There are serializeObject() implements, but the first code example here is small and easily pasted in-line.

        $('#create_account_form').on('submit', function(event) {
            event.preventDefault();
            $.ajax({
                'url': '/account/create',
                'method':'post',
                'data': $.parseParams( $('#create_account_form').serialize() ),

Thanks!

@geoidesic

This comment has been minimized.

Copy link

@geoidesic geoidesic commented Sep 8, 2015

Yeah, the upgraded version doesn't work for me at all. Firstly it requires a leading "?" and I just get data[Nan]: "1". The original was better.

@bymaximus

This comment has been minimized.

Copy link

@bymaximus bymaximus commented Nov 4, 2015

Solved data[NaN] problem, change line 51 from

params[key][parseInt(index)] = value;

To

params[key][index] = value;
@olaferlandsen

This comment has been minimized.

Copy link

@olaferlandsen olaferlandsen commented Jan 25, 2016

dont work with more complex url, example:

https://gist.github.com/kares/956897?var[1]=0&var[2]=9&var[3][d]=f

Returns:

{
    "var" : {
         0 : "0" ,
         1 : "9",
         3 : "f"
    }
 }

Please check this function:

https://github.com/kvz/phpjs/blob/master/functions/strings/parse_str.js

@yairEO

This comment has been minimized.

Copy link

@yairEO yairEO commented Oct 24, 2016

There is a larger debate going on here - http://stackoverflow.com/q/1131630/104380

@Tusko

This comment has been minimized.

Copy link

@Tusko Tusko commented Feb 5, 2018

one line deParams :)

function deParams(str) {
    return (str || document.location.search).replace(/(^\?)/,'').split("&").map(function(n){return n = n.split("="),this[n[0]] = n[1],this}.bind({}))[0];
}
@CarabineSK

This comment has been minimized.

Copy link

@CarabineSK CarabineSK commented Jan 7, 2020

PHPstorm inspection says this part is not quite ideal:
while ( e = re.exec(query) ) {
instead, it is better to use this:
while ((e = re.exec(query)) !== null) {

Same example in mozilla developer page: RegExp.prototype.exec()

@enniosousa

This comment has been minimized.

Copy link

@enniosousa enniosousa commented Mar 17, 2020

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.