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

静的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のように連想配列化されていれば、汎用性が高くなります。

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

作ってみた関数がこちら

<script>
function para_get()
{
	// URLパラメータを"&"で分離する
	var url_search = location.search.substr(1).split('&');

	// パラメータ連想配列エリア初期化
	var para = [];

	// キーエリア初期化
	var key = null;

	for(var i = 0 ; i < url_search.length ; i++)
	{
		// "&"で分離したパラメータを"="で再分離
		key = url_search[i].split("=");

		// パラメータを連想配列でセット
		para[key[0]] = key[1];
	}

	// 連想配列パラメータを返す
	return (para);
}
</script>

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

location.search.substr(1)の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パラメータを扱うことができます。

今回のレポートは以上です。
読んでいただいてありがとうございました。


Twitterでもweb集客向上、webマーケティング等についてブログの内容以外の情報発信もさせていただいております。Twitterもご覧いただければ幸いです。


ホームページに関するお悩み事やご相談事がございましたら私どもまでご連絡ください。
微力ではございますが、鋭意ご対応申し上げます。

ホームページのご提案もさせていただいております