URLに含まれる クエリストリング (クエリ文字列、クエリパラメータ) を取得し、使いやすい形に分解、整形する サンプルコード を掲載します。 単純な クエリストリング を分解する コード はよく見かけるので、もう少しがんばって 配列 や ハッシュ(連想配列) に対応したものを実装してみました。
目次
関連記事
取得 & 分解 & 整形 する サンプルコード
サンプルコード
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 | /** * グローバル変数 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
という オブジェクト が グローバル な領域に生成されているので、 この オブジェクト に対して、プロパティアクセス して利用します。1234567891011121314151617181920212223242526272829<!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
例えば、以下のような動作を行います。 受け取った クエリストリング の例とそれに対応して生成(分解、整形)される オブジェクト を以下に示します。
受け取った クエリストリング
1 | ?action=view&id=123&debug&arraylist[]=val1&arraylist[]=val2&hashlist[foo]=foo&hashlist[bar]=bar |
クエリストリング を元に生成する オブジェクト
1 2 3 4 5 6 7 8 9 10 11 12 13 | var query = { action: 'view' , id: '123' , debug: undefined, arraylist: [ 'val1' , 'val2' ], hashlist: { foo: 'foo' , bar: 'bar' } } |
今回、以下のサイトを参考にしました。
最後に… このブログに興味を持っていただけた方は、 ぜひ 「Facebookページ に いいね!」または 「Twitter の フォロー」 お願いします!!