Mach3.laBlog

細かすぎて伝わらないjQuery拡張 (12) “$.parseQuery” – Advent Calendar 2016

$.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() を使うと良いでしょう。

コメント

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です


*