細かすぎて伝わらないjQuery拡張 (12) “$.parseQuery” – Advent Calendar 2016
この記事は賞味期限切れです。(更新から1年が経過しています)
$.parseQuery() は、URLのサーチ文字列(”?key=value&key2=value2″ のような)をパースしてキーと値を取得してくれる関数です。
$.parseQuery(str, asArray)
使い方
var str = "http://www.example.com/?name=john&age=23";
$.parseQuery(str); // => {name: "john", age: "23"}
$.parseQuery(str, true); // => [{key: "name", value: "john"}, {key: "age", value: "23"}]
- URL文字列を渡した場合は、サーチ文字列だけをパースします
- デフォルトではキーと値のセットのオブジェクトを返します
- 第二引数に true を渡すと配列で返します
通常は location.search を渡して使われるでしょう。
チェックボックス等で複数の値を渡すのに “[]” が使われますが、 その場合は “[]” を抜いたキーで扱われます。 また、同じキーに対する複数の値は配列にまとめられます。(オブジェクトで返される場合のみ)
var str = "?color[]=red&color[]=green&color[]=blue";
$.parseQuery(str); // => {color: ["red", "green", "blue"]}
コード
$.parseQuery = function(str, asArray){
var list = [], data = {}, decode;
decode = function(str){
return decodeURIComponent(str.replace(/\+/g, "%20"));
};
str.replace(/(^.*?\?|#.*?$)/g, "")
.split("&")
.forEach(function(item){
item = item.split("=");
if(item.length > 1){
list.push({
key: decode(item[0]).replace(/\[\]$/, ""),
value: decode(item[1])
});
}
});
if(asArray){
return list;
}
list.forEach(function(item){
if(item.key in data){
if(! $.isArray(data[item.key])){
data[item.key] = [data[item.key]];
}
data[item.key].push(item.value);
return;
}
data[item.key] = item.value;
});
return data;
};
逆の事をしたい場合は jQuery.param() を使うと良いでしょう。
コメント