-
-
Save kares/956897 to your computer and use it in GitHub Desktop.
| /** | |
| * $.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
Could you provide some example? ... doesn't work for me...