【jQuery】URLパラメータ値でコンテンツの表示・非表示を切り替える方法

jQuery（ジェイクエリ）

2023.08.01

この記事は約5分で読めます。

URLパラメータ値でコンテンツの表示・非表示を切り替えます

URLからパラメータを取得する
コンテンツの表示・非表示を切り替える
完成形
まとめ

URLからパラメータを取得する

この関数は、URLからパラメータを取得します。

  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  <script>
    $(document).ready(function() {
      // URLからパラメータを取得する関数
      function getParameterByName(name) {
        name = name.replace(/[\[\]]/g, "\\$&");
        var regex = new RegExp("[?&]" + name + "(=([^&#]*)|&|#|$)"),
            results = regex.exec(window.location.href);
        if (!results) return null;
        if (!results[2]) return '';
        return decodeURIComponent(results[2].replace(/\+/g, " "));
      }
    }
  </script>

name パラメータには取得したいパラメータの名前を指定します。
name の中に含まれる特殊文字「[」および「]」をエスケープします。
正規表現パターンを作成します。パターンは ? または & で始まり、name の後に = が続き、その後にパラメータの値が続くか、& または # または行の末尾 ($) が続くという形式です。
regex.exec(window.location.href) で現在のページのURLに対して正規表現を適用し、パラメータと値の結果を取得します。
もし結果が得られなかった場合は null を返します。
もし値がない場合は空文字列 '' を返します。
パラメータの値がある場合は、decodeURIComponent を使ってURLエンコードを解除し、+ をスペースに置き換えてから返します。

この関数を使うと、例えば以下のようなURLがあった場合に、指定したパラメータの値を取得することができます。

https://example.com/page?name=John&age=25

例えば、name パラメータの値を取得する場合は、以下のように呼び出します。

var nameValue = getParameterByName('name');
console.log(nameValue); // 'John'

コンテンツの表示・非表示を切り替える

パラメータの値を取得して、コンテンツの表示・非表示を切り替えます。

    // パラメータの値を取得
      var showContent = getParameterByName('show');

      // コンテンツの表示・非表示を切り替える
      if (showContent === 'true') {
        $('.content').show();
      } else {
        $('.content').hide();
      }
    });
  </script>
  <style>
    .content {
      display: none;
    }
  </style>

完成形

スクリプトの完成形です。

  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  <script>
    $(document).ready(function() {
      // URLからパラメータを取得する関数
      function getParameterByName(name) {
        name = name.replace(/[\[\]]/g, "\\$&");
        var regex = new RegExp("[?&]" + name + "(=([^&#]*)|&|#|$)"),
            results = regex.exec(window.location.href);
        if (!results) return null;
        if (!results[2]) return '';
        return decodeURIComponent(results[2].replace(/\+/g, " "));
      }

      // パラメータの値を取得
      var showContent = getParameterByName('show');

      // コンテンツの表示・非表示を切り替える
      if (showContent === 'true') {
        $('.content').show();
      } else {
        $('.content').hide();
      }
    });
  </script>
  <style>
    .content {
      display: none;
    }
  </style>

パラメータにshow=trueがあればコンテンツを表示、なければ非表示になります。