JavaScript でURLパラメータを取得し配列化する

前にAPIを利用してみたときに、URLの後のクエリ文字にパラメータを乗せてレスポンスを取得していましたが、同じようにパラメータ自体を取得して、それを基にサイト内でもあれこれできるはずなので、今回はURLパラメータを取得する方法を載せておくことにしました。

URLパラメータ

URLパラメータは、ページのURLの後にクエリ文字でつながれた文字列のことです。

この文字列はパラメータ名と値をイコール(=)で結び、それらをアンパサンド(&)でつなぐ形になっています。

URLパラメータの取得から配列化

URLパラメータの取得自体は、ページのURLを表す location をオブジェクトとして search メソッドを利用するだけで簡単に行えます。

var d = location.search;

これで変数 d に、クエリ文字とその後のパラメータが格納されます。

ただ、取得するだけならこれだけでいいんですが、このままだとパラメータと値がつながったままですし、表示すると全角文字列はエンコードされたままで利用しにくいです。

ということで、取得する際に以下のことをやってみます。

  1. 全角文字を文字化けさせないために、 decodeURI() でデコードしたうえで取得。
  2. パラメータの値を、パラメータ名から参照できるように '&' や '=' を replace メソッド で置換して連想配列化。
  3. 取得時に文字列ではなく、配列として読むために eval関数を利用する。

これらを踏まえて取得する場合は、こんな感じになります。

var d = eval(decodeURI(location.search.replace(/\?/,'({"').replace(/&/g,'","').replace(/=/g,'":"') + '"});'));

取得時に変換するために replace メソッドを連続でつなげることになりましたが、とりあえずこれで配列として取得できるはずです。

追記(2012年03月18日)

値の中にイコールが入る場合は上の記述では取得できませんので、下のように変更しましょう。

var d = eval(decodeURI(location.search.replace(/\?/,'({').replace(/=([^&]+)/g,function(){return ':"' + arguments[1] + '"'}).replace(/&/g,',') + '});'));

スポンサードリンク

inserted by FC2 system