jQuery get array values from url

Question

I've got an url like this:

http://www.somewhere.com/index.html?field[]=history&field[]=science&field[]=math

Using jQuery, how can I grab the GET array?

Thanks.

• mcandre: What is your underlying HTML server, PHP, or something else?
• Jeffrey: server does PHP, I'm trying to filter a large table based on the jquery datatables filter... so I need to pass the array through jquery for the filter to work... if that makes sense.

Answer 1

[See it in action]

var str = "http://www.somewhere.com/index.html?field[]=history&field[]=science&field[]=math";
var match = str.match(/[^=&?]+\s*=\s*[^&#]*/g);
var obj = {};
for ( var i = match.length; i--; ) {
 var spl = match[i].split("=");
 var name = spl[0].replace("[]", "");
 var value = spl[1];
 obj[name] = obj[name] || [];
 obj[name].push(value);
}
alert(obj["field"].join(", "))​​

• Brock Adams: That regex fails if the URL has a named anchor. Might change [^&] to [^&#].
• gblazex: Big thanks for the tip, I've updated the code and the url. :)
• Mike Purcell: Thx for the code snippet, used it here: stackoverflow.com/questions/15670317/…

Answer 2

/*
 * Returns a map of querystring parameters
 * 
 * Keys of type <fieldName>[] will automatically be added to an array
 *
 * @param String url
 * @return Object parameters
 */
function getParams(url) {
 var regex = /([^=&?]+)=([^&#]*)/g, params = {}, parts, key, value;
 while((parts = regex.exec(url)) != null) {
 key = parts[1], value = parts[2];
 var isArray = /\[\]$/.test(key);
 if(isArray) {
 params[key] = params[key] || [];
 params[key].push(value);
 }
 else {
 params[key] = value;
 }
 }
 return params;
}