JavaScript で クエリストリング を 取得 & 分解 & 整形 する 方法

2013年12月1日 16:58 , 0 件のコメント

URLに含まれる クエリストリング （クエリ文字列、クエリパラメータ） を取得し、使いやすい形に分解、整形する サンプルコード を掲載します。 単純な クエリストリング を分解する コード はよく見かけるので、もう少しがんばって 配列 や ハッシュ（連想配列） に対応したものを実装してみました。

目次

関連記事

取得 & 分解 & 整形 する サンプルコード

サンプルコード

/**
* グローバル変数 query に、クエリストリング解析結果を格納します。
*
* サンプル クエリ
*   ?action=view&id=123&debug&arraylist[]=val1&arraylist[]=val2&hashlist[foo]=foo&hashlist[bar]=bar
* サンプル 解析結果
*   var query = {
*     action: 'view',
*     id: '123',
*     debug: undefined,
*     arraylist: [
*       'val1',
*       'val2'
*     ],
*     hashlist: {
*       foo: 'foo',
*       bar: 'bar'
*     }
*   }
*/
var query = (function () {
    var queryString, queryItems, queryItem,
        i, length, matchs, key, pkey, skey, value, list, hash, params = {};

    // クエリストリングの取得
    queryString = window.location.search || '';
    queryString = queryString.substr(1, queryString.length);

    // パラメター毎に分解
    queryItems = queryString.split('&');

    // 各パラメターをキー&バリューに分解
    for (i = 0, length = queryItems.length; i < length; i++) {
        // 1組取り出し
        queryItem = (queryItems[i] || '').split('=');

        // キー&バリューに分解
        key = queryItem[0];
        value = queryItem[1] ? window.decodeURIComponent(queryItem[1]) : undefined;

        // キー文字列によってオブジェクトの作り方を変える
        matchs = (/([\w$]*)\[([\w$]*)\]/g).exec(key);
        if (matchs === null) {
            // 単純なキー&バリュー
            params[key] = value;
        } else {
            pkey = matchs[1];
            skey = matchs[2];
            if (!skey) {
                // 配列にバリューを格納
                list = params[pkey] = params[pkey] || [];
                list[list.length] = value;
            } else {
                // ハッシュにサブキーとバリューを格納
                hash = params[pkey] = params[pkey] || {};
                hash[skey] = value;
            }
        }
    }

    return params;
})();

サンプルコード の 使い方

上記サンプルコードは基本的にコピペで利用できます。

  1. 上記 サンプルコード を コピペ して適当な名前で保存します。 ここでは "querystring.js" として保存したものとします。
  2. 保存した "querystring.js" を利用するより前に読み込みます。 query という オブジェクト が グローバル な領域に生成されているので、 この オブジェクト に対して、プロパティアクセス して利用します。 
    <!DOCTYPE html>
<html>
  <head>
    <title>QueryString サンプルコード</title>
    
    <!-- コピペしたサンプルコードを実処理より前に読み込みます。1度だけで OK。 -->
    <script type="text/javascript" src="./querystring.js"></script>
    
    <!-- 具体的な利用方法は… query オブジェクト へのアクセスで OK。 -->
    <script type="text/javascript">
      if (console) {
        console.log(window.location.search);
        // 例えば、以下のようなクエリストリングだった場合
        // LOG> ?action=view&id=123&debug&arraylist[]=val1&arraylist[]=val2&hashlist[foo]=foo&hashlist[bar]=bar

        console.log(query.action);
        // LOG> 'view'

        console.log(query['id']);
        // LOG> '123' 

        console.log(query.arraylist[0]);
        // LOG> 'val1'
      }
    </script>
  </head>
  <body>
  </body>
</html>

対応している クエリストリング

今回、作成した サンプルコード では以下のような クエリストリング に対応しています。 いわゆる、上記 サンプルコード の仕様に相当します。

対応する クエリストリング の 種類

  • 単純なキーバリュー
    例：?key=value
  • キーのみ
    例：?key
  • 配列
    例：?key[]=value0&key[]=value1
  • ハッシュ
    例：?key[hoge]=hogevalue&key[foo]=foovalue

例えば、以下のような動作を行います。 受け取った クエリストリング の例とそれに対応して生成（分解、整形）される オブジェクト を以下に示します。

受け取った クエリストリング

?action=view&id=123&debug&arraylist[]=val1&arraylist[]=val2&hashlist[foo]=foo&hashlist[bar]=bar

クエリストリング を元に生成する オブジェクト

var query = {
  action: 'view',
  id: '123',
  debug: undefined,
  arraylist: [
    'val1',
    'val2'
  ],
  hashlist: {
    foo: 'foo',
    bar: 'bar'
  }
}

今回、以下のサイトを参考にしました。

最後に… このブログに興味を持っていただけた方は、 ぜひ 「Facebookページ に いいね！」または 「Twitter の フォロー」 お願いします！！