jQuery.parseParams - parse query string paramaters into an object

jquery.parseparams.js

/**
 * $.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);

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' }

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'] }

Excellent, thank you very much

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);

Very useful! Been looking for something like this.

very good, its really useful thanks

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);

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);

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

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

@DimitryPHP have you solved that?

Thanks Kares, it helps.

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!

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.

Solved data[NaN] problem, change line 51 from

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

To

params[key][index] = value;

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

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

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];
}

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()

A jQuery plugin https://github.com/AceMetrix/jquery-deparam