サイトアイコン LUCKLOG

JavascriptでURLクエリパラメータを配列に格納したい（PHPは何もしなくても配列に格納）

luck

URLクエリパラメータを使うと、表示するページに対していろいろと処理することができ、たいへん便利です。
よく見かけるのは「?page=2」などではないでしょうか？ブログ一覧の2ページ目などがそのような形になっていることが多いです。

URLにパラメータを付与することは簡単なのですが、実際に利用する際にjavascriptだと少しだけ面倒です。使いやすく配列に格納する関数を考えましたので、そちらを紹介したいと思います。

スポンサーリンク

javascriptでURLクエリパラメータを使いやすくする

javascriptでもURLクエリパラメータは簡単に取得できます。

location.search

こちらにURLクエリパラメータが「?page=2&preview=true」といった文字列として格納されています。
※一例です。URLクエリパラメータはルール内であれば任意です

これでは、「キー(例：page)」に対する「値(例：2)」を簡単には取得できません。少し解析しなければなりません（文字列の分割）。

パラメータの取得方法（URLクエリパラメータの分割）

文字列の分割は、下記のような流れになります。
※「?page=2&preview=true」を例にします

  1. 「?」を取り除く
    ※「page=2&preview=true」?を除去
  2. 「&」で分割する
    ※「page=2」「preview=true」の2つの文字列に分割
  3. 2で分割した各文字列を「=」で分割する。分割した前部分がキー、後ろが値となります
    2つのパラメータが取得できます。「page」の値が「2」、「preview」の値が「true」

難しい処理ではありませんが、パラメータを配列に格納して返してくれる関数があった方が便利です。

パラメータの取得（関数化）

下記関数がURLクエリパラメータを配列で返してくれる関数になります。

コピーする
※最新のChrome/Firefoxでは動作確認済
※IE11はクリップボードを許可した場合動作確認済
※うまくコピーできない場合は手動でコピーしてください
function url_query_param() {
    var search = location.search;
    search = search.replace('?', '');
    var ar_search = search.split('&');
    var param = new Array();
    ar_search.forEach(function (val) {
        var sep_val = val.split('=');
        param[sep_val[0]] = sep_val[1];
    });
    return param;
}

上項「パラメータの取得方法（URLクエリパラメータの分割）」にて説明した流れをそのまま処理にしたものです。

①「search」にURLクエリパラメータを入れ、「?」を取り除く

    var search = location.search;
    search = search.replace('?', '');

②①の値を「&」で分割する

    var ar_search = search.split('&');

③②で分割したできた文字列数分ループし、各文字列を「=」で分割する。分割した前部分を「配列のキー」、後ろ部分を「配列の値」として格納する

    var param = new Array();
    ar_search.forEach(function (val) {
        var sep_val = val.split('=');
        param[sep_val[0]] = sep_val[1];
    });

①～③で作成した配列を返す関数となります。

これで、URLクエリパラメータが連想配列に格納された状態になっていますので、配列のキーにパラメータのキーを指定すれば、値を簡単に取得することができます。

（例）「?page=2&preview=true」の場合

var param = url_query_param();
param['page']; // 「2」が格納されている
param['preview']; // 「true」が格納されている

実例

まずは「こちら >」をクリックしてください。
このページのURLに「?param1=1&param2=test」というパラメータを付与したリンクになります。

「こちら >」をクリックした後に下記「パラメータの確認」をクリックしてください。ポップアップのメッセージにてパラメータを表示します。
※パラメータの取得は先ほどの関数で取得したものです

パラメータの確認

手動でURLにパラメータを付与しても、反映されますので、お試しください。
※パラメータの設定方法に誤りがある場合は反映されません

これで、簡単にURLクエリパラメータが簡単に取得できるようになりました。

PHPの場合（余談）

phpの場合、何もしなくてもURLクエリパラメータは配列に格納されています。

（例）「?page=2&preview=true」の場合

$_GET['page']; // 「2」が格納されている
$_GET['preview']; // 「true」が格納されている

関数がする必要がありません。有難いですね。

ちなみに私は、PHPが使える場合であれば、そちらで取得し、処理するようにしています。

スポンサーリンク