JavascriptでURLパラメータを連想配列にして取得する。

2018年12月19日2019年10月16日

静的HTMLでもURLパラメータ渡しは可能です。
例えば以下のような呼び出し方です。

sample.html?id=test&date=2018-12-19&page=2

プログラムをされておられる方ならおなじみです。
?は以降パラメータを意味します。
&は次のパラメータ開始を意味します。
=を挟んで左がパラメータ名で、右が値を意味します。

上記の例だと以下のような意味になります。
id : test
date : 2018-12-19
page : 2

PHPなどプログラムであれば、これらのURLパラメータの値を取得することは容易にできます。例えばPHPの記述であれば、以下のように変数としてパラメータを使用します。

echo $_REQUEST[“id”] ・・・  「test」が表示されます
echo $_REQUEST[“date”]・・・「2018-12-19」が表示されます。
echo $_REQUEST[“page”]・・・「2」が表示されます。

しかしこれがJavascriptだと簡単にはいきません。
そこで、PHPのようにURLパラメータを取り出す関数がないか探してみました。

ググってみたらたくさん出てきましたが、いまひとつ使い勝手が難しい

いつものごとくGoogleで探してみたところたくさん出てきました。
ただ、どれも独自性が強く汎用性が低かったため、これらを参考に作ってみることにしました。

やりたいことは、Javascriptでパラメータを連想配列で使用することです。
PHPのように連想配列化されていれば、汎用性が高くなります。

これを念頭に置いて考えてみました。

作ってみた関数がこちら

考え方は、URLパラメータ文字列の分割分離作業です。
今回の例だと、パラメータ部分は「?id=test&date=2018-12-19&page=2」なので、&と=を分割・分離してゆきます。

location.search.substr(1)の１は、パラメータの1文字目が「?」なので2文字目からを使用するという意味です。事実上「?」の文字をカットしています。

split(‘&’)は、「＆」の文字を境に文字列を分割しています。
この段階で変数のurl_searchには以下のように格納されています。

url_searchの中身
“id=test”,  “date=2018-12-19”,  “page=2”

3つのパラメータがあるので、for文でパラメータの数分ループし、今度は「=」の文字を境に分割します。

変数keyには以下のように格納されてゆきます。

key変数1回目
“id”, “test”

key変数2回目
“date”, “2018-12-19”

key変数3回目
“page”, “2”

左側がパラメータ名なので、連想名としてセットします。
右側がパラメータの値なので、連想配列の値としてセットします。

これでPHPのようにURLパラメータを扱うことができます。