• お役立ち

URLのクエリストリングの値を配列で返すJavaScriptの関数

  • このエントリーをはてなブックマークに追加
  • LINEで送る

表示中のページのURLのクエリストリングの値によってJavaScriptの処理を分岐したい、というようなことはしばしばあると思います。そうした際に使える関数を作ってみました。

上記のquery2object.jsを読み込むか、もしくは上記の記述をまるっとHTMLやJSの中にコピペして使ってください。

使用例

例えば表示中のページが以下のようなURLだったとして↓

http://mywebsite.hoge/?name=Sato&age=30

「name」と「age」の値を取得して出力する場合は以下のような記述となります。

var o = query2object();
var name = o.name[0];
var age  = o.age[0];
alert("名前は" + name + "です。年齢は" + age + "才です。");

のようになります。

ご覧のとおり、関数が返す各パラメーター(nameやage)の値は配列になっています。これは、複数選択可能なチェックボックスなどの場合、クエリストリング中に同一の変数名のセットが複数存在することになるからです。例えば以下のような形になります。

http://mywebsite.hoge/?name=Sato&age=30&hobby=guitar&hobby=travel&hobby=drinking

こうした場合でも、以下のように正しく処理可能です。

var o = query2object();
var name = o.name[0];
var age  = o.age[0];
alert("名前は" + name + "です。年齢は" + age + "才です。");
var hobbies = o.hobby;
for(var i = 0; i <hobbies.length; i++ ){
	alert(i + "番目の趣味は" + hobbies[i] + "です。");
}

はじめはクエリストリング中に同じ変数のセットが複数回現れたときだけ配列で返すことも考えたんですが、複数選択のチェックボックスでチェックされた数が1つの時と2つ以上の時で値(のデータ形式)が異なってしまうのも処理上都合が悪いので、すべて配列で返すように統一しました。

みなさんもよろしければ使ってみてください。

星虹思械BRICOLEUR

関連コンテンツ