javascriptでURLのパラメータを取得する方法

PHPとかサーバーサイドの言語だとURLのパラメータを簡単に取得できますが、javascriptだとひと手間加える必要があります。
今回はjavascriptを使ってなるURLのパラメータを取得する方法を紹介します。

取得方法

window.location.searchを使う

window.location.searchを使うと、?を含むURLのパラメータを文字列で取得できます。
例えば、下記のコードを実行してみましょう。

//test.html?param1=test&param2=sampleの場合

//コンソールに?param1=test&param2=sampleが表示される。
console.log(window.location.search);

これで簡単に取得できました。
ただし、このままでは「param1の値だけを取得」などの処理ができません。

URLSearchParamsを使う

特定のパラメータの値を取得したい場合はURLSearchParamsも同時に使うことで簡単に取得できるようになります。

//test.html?param1=test&param2=sampleの場合

//window.location.searchをURLSearchParamsに渡す
var urlParams = new URLSearchParams(window.location.search);

//param1の値を取得する
console.log(urlParams.get('param1'));

パラメータが配列になっている場合は、下記のコードでデータを取得できます。

//test.html?param[]=test&param[]=sampleの場合

//param[]の値を取得する
//["test", "sample"]がコンソールに出力される
console.log(urlParams.getAll('param[]'));

特定のパラメータが存在するか確認する場合はhas(‘パラメータ名’)を使うと存在チェックができます。

//test.html?param=sample&param3=の場合

//trueが返される
console.log(urlParams.has('param1')); 
//falseが返される
console.log(urlParams.has('param2'));
//値は入っていないが、パラメータは存在するのでtrueが返される
console.log(urlParams.has('param3')); 

パラメータのみを取得・パラメータとデータを取得

パラメータのみを取得

パラメータのみを取得する場合は以下のコードで取得することができます。
配列ではなくオブジェクトで返されることに注意しましょう。

//test.html?param1=test&param2=sampleの場合

//パラメータの一覧がオブジェクトで返される
var keys = urlParams.keys();
for(key of keys) { 
  console.log(key); 
}

パラメータとデータを取得

パラメータとデータを同時に取得する場合は以下のコードで取得することができます。
オブジェクトと配列が入っていることに注意しましょう。

//test.html?param1=test&param2=sampleの場合

//オブジェクトが返される
var entries = urlParams.entries();
//pairにパラメータとデータの配列が代入される
for (pair of entries) {
    //pair[0]がパラメータ
    //pair[1]がデータ
    console.log(pair[0], pair[1]);
}

URLSearchParamsが使えないとき

URLSearchParamsですがすべてのブラウザに対応しているわけではありません。
（※Edgeは対応してませんでした。）
以下のコードでデータを取得することが可能です。

//test.html?param1=sampleの場合

//指定したパラメータのデータを取得する関数
function getUrlParameter(name) {
    name = name.replace(/[\[]/, '\\[').replace(/[\]]/, '\\]');
    var regex = new RegExp('[\\?&]' + name + '=([^&#]*)');
    var results = regex.exec(location.search);
    return results === null ? '' : decodeURIComponent(results[1].replace(/\+/g, ' '));
};

//sampleが出力される
console.log(getUrlParameter('param1'));
//コンソールに何も表示されない（nullが返されるため）
console.log(getUrlParameter('param2'));