1 概要
2 URLSearchParamsを利用する方法
- 2.1 書式
- 2.2 プログラム : 指定したパラメーター名の値を取得する
  - 2.2.1 コード
  - 2.2.2 解説
  - 2.2.3 実行結果
- 2.3 プログラム : パラメーター名、値を列挙して取得する
  - 2.3.1 コード
  - 2.3.2 解説
  - 2.3.3 解説
  - 2.3.4 実行結果
3 document.location.search の値を文字列処理してパラメーターを取得する方法
- 3.1 プログラム例
  - 3.1.1 コード
  - 3.1.2 解説
  - 3.1.3 表示結果

URLのパラメーターを取得する

JavaScriptでURLのパラメーターを取得するコードを紹介します。

概要

JavaScriptでURLのパラメータを取得して利用したい場合があります。 JavaScriptでは、URLのパラメーターを"document.location.search"で取得できます。ただし、URLのパスの後ろのパラメーターの文字列をまとめて取得することしかできないため、各パラメータの値の取得は取得した文字列を解析する必要があります。

URLSearchParamsを利用する方法

新しいWebブラウザ (Chrome バージョン49以降、Firefox バージョン29以降、Safari バージョン10.1以降など)では、URLのパラメーターを処理する URLSearchParamsオブジェクトを利用できます。

書式

URLSearchParamsオブジェクトの作成は以下の書式を利用します。

var (変数名) = new URLSearchParams([URL]);

プログラム : 指定したパラメーター名の値を取得する

コード

下記のHTMLファイルを作成します。

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8" />
  <title></title>

  <script type="text/javascript">
    window.onload = function onLoad() {

      var params = new URLSearchParams(window.location.search);

      var target = document.getElementById("param_q_out");
      if (params.has("q") == true) {
        target.innerHTML = params.get("q");
      } else {
        target.innerHTML = "パラメーターはありません。";
      }

      var target = document.getElementById("param_mode_out");
      if (params.has("mode") == true) {
        target.innerHTML = params.get("mode");
      } else {
        target.innerHTML = "パラメーターはありません。";
      }
    }
  </script>

</head>

<body>
  <div>パラメーター</div>
  <hr />
  <p>パラメーター q:</p>
  <div id="param_q_out"></div>

  <hr />
  <p>パラメーター mode:</p>
  <div id="param_mode_out"></div>
</body>
</html>

解説

ページが表示されると、下図のonload イベントに設定された下記の関数が実行されます。

    window.onload = function onLoad() {
      /* 中略 */
    }

URLSearchParams オブジェクトを作成します。コンストラクタの第一引数にはパーシングするURL、またはURLパラメーターを与えます。今回の例では、URLはアクセスしたページのURLパラメーターを与えますので、window.location.search を\コンストラクタの引数に設定します。

  var params = new URLSearchParams(window.location.search);

パラメータの有り無し判定と、パラメーターの値を取得しています。パラメーターの値の有り無しは、(URLSearchParams オブジェクト).has("(パラメータ名)") で取得できます。
hasメソッドに与えたパラメターの値が存在する場合は、hasメソッドはtrueを返します。
パラメーターの存在が確認できた場合は、パラメーターの値を取得します。パラメーターの値は (URLSearchParams オブジェクト).get("(パラメータ名)") で取得できます。
取得したパラメーターの値をページの "param_q_out" の要素の位置に表示します。
パラメーターがない場合は、「パラメーターはありません。」のメッセージを表示します。

  var target = document.getElementById("param_q_out");
  if (params.has("q") == true) {
    target.innerHTML = params.get("q");
  } else {
    target.innerHTML = "パラメーターはありません。";
  }

実行結果

上記のHTMLファイルをWebブラウザで表示します。下図のページが表示されます。URLにパラメーターが無いため、パラメーターが無い旨のメッセージが表示されています。

HTMLファイルの後ろに?q=penguin を追記してアクセスします。下図のページが表示されます。パラメーターqの値が取得され、"penguin" の値がページに表示されます。

続いて、HTMLファイルの後ろに?q=penguin&mode=write を追記してアクセスします。下図のページが表示されます。パラメーター q とパラメーター mode の値が取得され、ページに表示されます。

HTMLファイルの後ろに?mode=write を追記してアクセスします。下図のページが表示されます。パラメーター q が無くなったため、パラメーター q の欄には「パラメーターはありません。」のメッセージが表示されます。

プログラム : パラメーター名、値を列挙して取得する

URLSearchParamsオブジェクトを利用すると、(URLSearchParamsオブジェクト).keys()メソッドや、(URLSearchParamsオブジェクト).entries()メソッドでパラメータ名や値を列挙して取得することもできます。

コード

以下のHTMLファイルを記述します。

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8" />
  <title></title>

  <script type="text/javascript">
    window.onload = function onLoad() {
      var params = new URLSearchParams(window.location.search);

      var paramskey = params.keys();

      var target = document.getElementById("param_out1");
      for (p of paramskey) {
        target.innerHTML += p +"<br/>";
      }

      var paramsentry = params.entries();

      var target = document.getElementById("param_out2");
      for (e of paramsentry) {
        target.innerHTML += e[0] +":" + e[1] + "<br/>";
      }
    }
  </script>
</head>
<body>
  <div>パラメーター</div>
  <hr />
  <p>パラメーター キー:</p>
  <div id="param_out1"></div>
  <hr />
  <p>パラメーター キーと値:</p>
  <div id="param_out2"></div>
</body>
</html>

解説

ページが表示されると、下図のonload イベントに設定された下記の関数が実行されます。

    window.onload = function onLoad() {
      /* 中略 */
    }

  var params = new URLSearchParams(window.location.search);

params.keys(); によりパラメーターのキーのリストを取得できます。リストは paramskey 変数に格納します。

      var paramskey = params.keys();

paramskey のリストにあるキーの一覧を画面に表示します。リストからの要素の取り出しは for of ループを利用します。 for of ループの書式についてはこちらの記事を参照してください。

      var target = document.getElementById("param_out1");
      for (p of paramskey) {
        target.innerHTML += p +"<br/>";
      }

同様の処理で、params.entries(); メソッドの呼び出しによりパラメーターのキーと値のセットを取得できます。 entriesメソッドを呼び出した場合は要素が配列になっており、[0]の位置に要素のキー名が代入され、[1]の位置に値が代入されています。

      var paramsentry = params.entries();

      var target = document.getElementById("param_out2");
      for (e of paramsentry) {
        target.innerHTML += e[0] +":" + e[1] + "<br/>";
      }

実行結果

上記のHTMLファイルをWebブラウザで表示します。下図のページが表示されます。

HTMLファイルの後ろに?p=250 を追記してアクセスします。下図のページが表示されます。パラメーターpのキー名と値が取得され、"250" の値がページに表示されます。

HTMLファイルの後ろに?p=250&q=5 を追記してアクセスします。下図のページが表示されます。パラメーターのキーの一覧とキーと値のセットが表示されます。

パラメーターを増やしてアクセスした場合でも、同様にすべてのパラメーターのキーの一覧と、キーと値のセットの一覧が表示されます。

document.location.search の値を文字列処理してパラメーターを取得する方法

古いWebブラウザの場合は、URLSearchParamsオブジェクトが利用できないため、document.location.search の値を文字列処理してパラメーターを取得する必要があります。

プログラム例

コード

下記のコードを記述します。

GetParam.html

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
    <script type="text/javascript">
        window.onload = function onLoad() {
          var param = GetQueryString();

          var target = document.getElementById("param_q_out");
          if (param == null || param["q"] == undefined) {
            target.innerHTML = "パラメーターはありません。";
          } else {
            target.innerHTML = param["q"];
          }

          var target = document.getElementById("param_mode_out");
          if (param == null || param["mode"] == undefined) {
            target.innerHTML = "パラメーターはありません。";
          }
          else {
            target.innerHTML = param["mode"];
          }
        }

        function GetQueryString() {
            if (1 < document.location.search.length) {
                var query = document.location.search.substring(1);
                var parameters = query.split('&');

                var result = new Object();
                for (var i = 0; i < parameters.length; i++) {
                    var element = parameters[i].split('=');

                    var paramName = decodeURIComponent(element[0]);
                    var paramValue = decodeURIComponent(element[1]);

                    result[paramName] = decodeURIComponent(paramValue);
                }
                return result;
            }
            return null;
        }
    </script>
</head>
<body>
  <div>パラメーター</div>
  <hr />
  <p>パラメーター q:</p>
  <div id="param_q_out"></div>

  <hr />
  <p>パラメーター mode:</p>
  <div id="param_mode_out"></div>
</body>
</html>

解説

URLパラメーター部分の文字列はdocument.location.searchプロパティで取得できます。パラメーターが空でない場合に処理を実行します。パラメーターが無い場合はnullを返します。

  if (1 < document.location.search.length) {
    /* 中略 */
  }
  return null;

substring(1)メソッドを呼び出すことで2文字目以降の文字列を取り出します。(URLパラメーターが"?q=ABCD&m=30"であれば"q=ABCD&m=30"を取得します。)

  var query = document.location.search.substring(1);  // 最初の1文字 (?記号) を除いた文字列を取得する

続いて、取得した文字列をsplit('&')により'&'区切りで分割をします。取得した文字列が"q=ABCD&m=30"であれば、parameters[0]にq=ABCD、parameters[1]にm=30が割り当てられます。

  var parameters = query.split('&');    // クエリの区切り記号 (&) で文字列を配列に分割する

さらにparametersの個々の要素について'='で区切りをし、値とパラメーター名を取得し、result連想配列に格納して戻り値として返します。

    var result = new Object();
    for (var i = 0; i < parameters.length; i++) {
      // パラメータ名とパラメータ値に分割する
       var element = parameters[i].split('=');

      var paramName = decodeURIComponent(element[0]);
      var paramValue = decodeURIComponent(element[1]);

      // パラメータ名をキーとして連想配列に追加する
       result[paramName] = decodeURIComponent(paramValue);
    }
    return result;

ページ表示時のコードは下記コードです。
はじめにGetQueryString(); 関数を呼び出し、先のパラメーターの切り出し処理を実行します。戻り値にはパラメーターの値を格納する連想配列のparam変数が戻ります。

パラメータが全くない場合は、param変数がnullとなります。指定したパラメーター名の値が無い場合は、param[(パラメーター名)]の値が undefined になりますので、条件式でパラメーターの有り無しを判定します。パラメーターがある場合はパラメーターの値を指定した要素の位置に表示し、パラメーターが無い場合には「パラメーターはありません。」のメッセージを表示します。

  window.onload = function onLoad() {
    var param = GetQueryString();

    var target = document.getElementById("param_q_out");
    if (param == null || param["q"] == undefined) {
      target.innerHTML = "パラメーターはありません。";
    } else {
      target.innerHTML = param["q"];
    }

    var target = document.getElementById("param_mode_out");
    if (param == null || param["mode"] == undefined) {
      target.innerHTML = "パラメーターはありません。";
    }
    else {
      target.innerHTML = param["mode"];
    }
  }