jQueryでURLからクエリ文字列を簡単操作！3つの方法とサンプルコード

2024-04-26

jQueryを使ってURLからクエリ文字列を取得する方法

ウェブページのURLには、? 記号の後にパラメータと値のペアが続くことがあります。これらのパラメータと値のペアは、クエリ文字列と呼ばれます。クエリ文字列は、動的なウェブページを作成したり、サーバーに情報を送信したりするために使用されます。

jQueryを使用してURLからクエリ文字列を取得するには、いくつかの方法があります。

location.search プロパティを使用する

最も簡単な方法は、location.search プロパティを使用することです。このプロパティには、現在のURLのクエリ文字列が含まれています。

var queryString = location.search;
console.log(queryString); // ?param1=value1&param2=value2

$.urlParam プラグインを使用すると、より簡単にクエリ文字列のパラメータを取得できます。このプラグインは、URLからパラメータ名と値を取得するメソッドを提供します。

var param1 = $.urlParam('param1');
console.log(param1); // value1

var param2 = $.urlParam('param2');
console.log(param2); // value2

カスタム関数を使用する

独自の関数を作成して、URLからクエリ文字列を取得することもできます。この方法は、より柔軟性がありますが、コード量が増えることになります。

function getQueryStringParams() {
  var queryString = location.search;
  var params = {};
  var pairs = queryString.slice(1).split('&');

  for (var i = 0; i < pairs.length; i++) {
    var pair = pairs[i].split('=');
    params[pair[0]] = decodeURIComponent(pair[1]);
  }

  return params;
}

var param1 = getQueryStringParams()['param1'];
console.log(param1); // value1

var param2 = getQueryStringParams()['param2'];
console.log(param2); // value2

例

次の例では、$.urlParam プラグインを使用して、URLから param1 と param2 というパラメータを取得する方法を示します。

<!DOCTYPE html>
<html>
<head>
  <title>Get Query String from URL</title>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script>
    $(document).ready(function() {
      var param1 = $.urlParam('param1');
      console.log(param1); // value1

      var param2 = $.urlParam('param2');
      console.log(param2); // value2
    });
  </script>
</head>
<body>
  <h1>Get Query String from URL</h1>
  <a href="?param1=value1&param2=value2">Click here</a>
</body>
</html>

この例を実行すると、次の出力がコンソールに表示されます。

value1
value2

jQueryを使ってURLからクエリ文字列を取得するサンプルコード

<!DOCTYPE html>
<html>
<head>
  <title>Get Query String from URL</title>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script>
    $(document).ready(function() {
      var queryString = location.search;
      console.log(queryString); // ?param1=value1&param2=value2

      // クエリ文字列からパラメータを個別に取得
      var param1Value = getParamValue('param1');
      console.log(param1Value); // value1

      var param2Value = getParamValue('param2');
      console.log(param2Value); // value2
    });

    function getParamValue(paramName) {
      var queryString = location.search;
      var params = new URLSearchParams(queryString);
      return params.get(paramName);
    }
  </script>
</head>
<body>
  <h1>Get Query String from URL</h1>
  <a href="?param1=value1&param2=value2">Click here</a>
</body>
</html>

$.urlParam プラグインを使用する

<!DOCTYPE html>
<html>
<head>
  <title>Get Query String from URL</title>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script src="https://gist.github.com/1119555"></script>
  <script>
    $(document).ready(function() {
      var param1Value = $.urlParam('param1');
      console.log(param1Value); // value1

      var param2Value = $.urlParam('param2');
      console.log(param2Value); // value2
    });
  </script>
</head>
<body>
  <h1>Get Query String from URL</h1>
  <a href="?param1=value1&param2=value2">Click here</a>
</body>
</html>

<!DOCTYPE html>
<html>
<head>
  <title>Get Query String from URL</title>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script>
    $(document).ready(function() {
      var params = getQueryStringParams();

      console.log(params['param1']); // value1
      console.log(params['param2']); // value2
    });

    function getQueryStringParams() {
      var queryString = location.search;
      var params = {};
      var pairs = queryString.slice(1).split('&');

      for (var i = 0; i < pairs.length; i++) {
        var pair = pairs[i].split('=');
        params[pair[0]] = decodeURIComponent(pair[1]);
      }

      return params;
    }
  </script>
</head>
<body>
  <h1>Get Query String from URL</h1>
  <a href="?param1=value1&param2=value2">Click here</a>
</body>
</html>

説明

上記のコードは、以下の3つの方法でURLからクエリ文字列を取得する方法を示しています。

location.search プロパティを使用する:
- この方法は最も簡単ですが、クエリ文字列全体を取得することしかできません。
- 個別のパラメータを取得するには、getParamValue 関数のような補助関数を使用する必要があります。
$.urlParam プラグインを使用する:
- この方法は、個別のクエリ文字列パラメータを簡単に取得できます。
- ただし、このプラグインを別途読み込む必要があります。
カスタム関数を使用する:
- この方法は最も柔軟性がありますが、コード量が増えることになります。
- 独自のロジックを実装する必要がある場合に適しています。

補足

上記

jQueryを使ってURLからクエリ文字列を取得するその他の方法

URLSearchParams インターフェースは、HTML5で導入された新しいAPIで、URLのクエリ文字列を操作するための便利な機能を提供します。

<!DOCTYPE html>
<html>
<head>
  <title>Get Query String from URL</title>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script>
    $(document).ready(function() {
      var queryString = location.search;
      var params = new URLSearchParams(queryString);

      console.log(params.get('param1')); // value1
      console.log(params.get('param2')); // value2
    });
  </script>
</head>
<body>
  <h1>Get Query String from URL</h1>
  <a href="?param1=value1&param2=value2">Click here</a>
</body>
</html>

正規表現を使用して、URLからクエリ文字列を抽出することもできます。

<!DOCTYPE html>
<html>
<head>
  <title>Get Query String from URL</title>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script>
    $(document).ready(function() {
      var queryString = location.search;
      var regex = /param1=([^&]*)/;
      var match = queryString.match(regex);

      if (match) {
        console.log(match[1]); // value1
      }

      var regex = /param2=([^&]*)/;
      var match = queryString.match(regex);

      if (match) {
        console.log(match[1]); // value2
      }
    });
  </script>
</head>
<body>
  <h1>Get Query String from URL</h1>
  <a href="?param1=value1&param2=value2">Click here</a>
</body>
</html>

分割を使用してクエリ文字列を解析する

URLのクエリ文字列を分割して、個々のパラメータを取得することもできます。

<!DOCTYPE html>
<html>
<head>
  <title>Get Query String from URL</title>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script>
    $(document).ready(function() {
      var queryString = location.search;
      var params = queryString.slice(1).split('&');

      for (var i = 0; i < params.length; i++) {
        var pair = params[i].split('=');
        console.log(pair[0] + ': ' + pair[1]);
      }
    });
  </script>
</head>
<body>
  <h1>Get Query String from URL</h1>
  <a href="?param1=value1&param2=value2">Click here</a>
</body>
</html>

注意事項

上記の方法を使用する場合は、以下の点に注意してください。

URLエンコードされた文字は、デコードする必要があります。
同じ名前のパラメータが複数ある場合は、最後の値のみ取得されます。
上記のコードはあくまで例であり、ニーズに合わせて調整する必要があります。

javascript jquery query-string

JavaScriptの配列宣言：基本編

Arrayコンストラクタを使用する: Array()角括弧を使用する: []どちらも有効な方法ですが、それぞれ微妙な違いがあり、状況によってどちらが適しているかが変わってきます。補足:Array()を使用する場合、引数として配列の長さを指定できます。引数に値を指定すると、その値で初期化された要素を持つ配列が作成されます。...

javascript arrays declaration

「$(this)」と「this」を使いこなして、jQueryプログラミングをレベルアップ！

JavaScriptとjQueryにおける「this」キーワードは、様々な意味を持つ複雑な存在です。特にjQueryと組み合わせて使用すると、さらに複雑になります。本解説では、「$(this)」と「this」の違いを、以下の3つの観点から詳細に解説します。...

javascript jquery this

「$(this)」と「this」を使いこなして、jQueryプログラミングをレベルアップ！

jQueryで名前で要素を選択！input要素だけでなくあらゆる要素に対応

jQueryでは、様々な方法で要素を選択することができます。その中でも、名前（name属性）で要素を選択する方法について解説します。方法名前で要素を選択するには、以下の2つの方法があります。$("[name='要素名']") セレクタを使用することで、指定された名前を持つすべての要素を選択することができます。...

javascript jquery html

JavaScript で navigator.geolocation.getCurrentPosition が時々動作しない問題を解決する

navigator. geolocation. getCurrentPosition メソッドが、時々動作し、時々動作しないことがあります。原因:この問題は、さまざまな要因によって引き起こされる可能性があります。ブラウザの許可: ユーザーがブラウザで位置情報へのアクセスを許可していない可能性があります。...

javascript jquery geolocation