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; })();
サンプルコード の 使い方
上記サンプルコードは基本的にコピペで利用できます。
- 上記 サンプルコード を コピペ して適当な名前で保存します。 ここでは "querystring.js" として保存したものとします。
- 保存した "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 の フォロー」 お願いします!!