jQueryでURLパラメータを複数取得する方法

jquery urlパラメータ取得複数

この記事では、jQueryを使ってURLから複数のパラメータを取得する方法について解説します。URLパラメータは、ウェブサイトの特定のページや機能にアクセスするために使用される、URLの末尾に追加されるキーと値のペアです。

URLパラメータの基本

URLパラメータの構造： `?` の後に `キー=値` の形式で記述され、複数のパラメータは `&` で連結されます。
例： https://example.com/search?q=javascript&sort=relevance

jQueryを使ったURLパラメータの取得方法

1. `URLSearchParams` オブジェクトの使用

new URLSearchParams(window.location.search) でURLSearchParamsオブジェクトを作成
getAll("パラメータ名") メソッドで指定したキーに対応する全ての値を取得
forEach() メソッドですべてのパラメータを順番に処理

<script>
  const urlParams = new URLSearchParams(window.location.search);

  // 特定のパラメータを全て取得
  const values = urlParams.getAll("q");
  console.log(values); // ["javascript"] 

  // 全てのパラメータを取得して処理
  urlParams.forEach((value, key) => {
    console.log(`${key}: ${value}`);
  });
</script>

2. `location.search` プロパティとsplitメソッドの使用

location.search でクエリ文字列を取得
split("&") でパラメータごとに分割
各パラメータを split("=") でキーと値に分割

<script>
  const queryString = window.location.search.substring(1);
  const params = queryString.split('&');
  const paramsObj = {};

  for (let i = 0; i < params.length; i++) {
    const pair = params[i].split('=');
    paramsObj[pair[0]] = decodeURIComponent(pair[1] || '');
  }

  console.log(paramsObj); // {q: "javascript", sort: "relevance"}
</script>

取得したパラメータの利用

変数に格納してページのコンテンツに動的に反映
フォームの初期値設定
APIリクエストの送信

実用的なサンプルコード

特定のパラメータを複数取得するコード例

<script>
  $(document).ready(function() {
    const urlParams = new URLSearchParams(window.location.search);
    const colors = urlParams.getAll("color");

    if (colors.length > 0) {
      $("#color-list").empty();
      colors.forEach(color => {
        $("#color-list").append(`<li>${color}</li>`);
      });
    }
  });
</script>

<ul id="color-list"></ul>

全てのURLパラメータを取得し、テーブルに表示するコード例

<script>
  $(document).ready(function() {
    const urlParams = new URLSearchParams(window.location.search);

    if (urlParams.toString() !== "") {
      $("#params-table tbody").empty();

      urlParams.forEach((value, key) => {
        $("#params-table tbody").append(`
          <tr>
            <td>${key}</td>
            <td>${value}</td>
          </tr>
        `);
      });
    }
  });
</script>

<table id="params-table">
  <thead>
    <tr>
      <th>キー</th>
      <th>値</th>
    </tr>
  </thead>
  <tbody></tbody>
</table>

まとめ

この記事では、jQueryを用いてURLから複数のパラメータを取得する方法を解説しました。URLパラメータは、ウェブサイトの動的な制御に欠かせない要素です。この記事で紹介した方法を活用して、より高度なウェブサイト構築に役立ててください。

参考文献

QA

Q1: URLパラメータを取得する方法は、`URLSearchParams`と`location.search`のどちらが良いですか？

A1: `URLSearchParams`は、URLパラメータを扱うための標準的なAPIであり、よりモダンで推奨される方法です。一方、`location.search`とsplitメソッドを組み合わせた方法は、古いブラウザでも動作する互換性の高い方法です。状況に応じて使い分けましょう。

Q2: URLパラメータに日本語などのマルチバイト文字が含まれている場合はどうすれば良いですか？

A2: URLパラメータにマルチバイト文字を含める場合は、`encodeURIComponent()`関数でエンコードする必要があります。取得したパラメータをデコードする場合は、`decodeURIComponent()`関数を使用します。

Q3: 取得したURLパラメータを元に、ページの内容を動的に変更するにはどうすれば良いですか？

A3: 取得したパラメータを元に、jQueryを使用してDOM操作を行うことで、ページの内容を動的に変更することができます。例えば、特定のパラメータの値に応じて、要素の表示/非表示を切り替えたり、コンテンツを書き換えたりすることができます。

その他の参考記事:jquery hash