jQueryでURLクエリ解析

JavaScriptでURLからクエリ文字列を取得する

jQuery を使用して URL からクエリ文字列を取得する方法について説明します。

URLの取得

まず、現在の URL を取得します。

var url = window.location.href;

クエリ文字列の抽出

URL からクエリ文字列の部分を抽出します。

var queryString = url.split('?')[1];

抽出されたクエリ文字列を解析して、キーと値のペアを取得します。

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

特定のクエリパラメータの値を取得します。

var parameterName = 'myParameter';
var parameterValue = queryObject[parameterName];

例

var url = 'https://example.com/page?param1=value1&param2=value2';
var queryObject = getQueryObject(url);
console.log(queryObject['param1']); // Output: value1

注意

• クエリパラメータが存在しない場合、queryObject には該当するキーが存在しません。
• decodeURIComponent() を使用して、エンコードされた文字をデコードします。

var url = window.location.href;

var queryString = url.split('?')[1];

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

var parameterName = 'myParameter';
var parameterValue = queryObject[parameterName];

var url = 'https://example.com/page?param1=value1&param2=value2';
var queryObject = getQueryObject(url);
console.log(queryObject['param1']); // Output: value1

jQuery以外の方法でURLクエリ文字列を取得する

location.search プロパティ

ブラウザの location オブジェクトの search プロパティを使用します。

var queryString = window.location.search;

URLSearchParams オブジェクト

URLSearchParams オブジェクトを使用して、クエリ文字列を解析します。

var url = 'https://example.com/page?param1=value1&param2=value2';
var urlParams = new URLSearchParams(url);

// クエリパラメータの値を取得
var param1Value = urlParams.get('param1');
var param2Value = urlParams.get('param2');

正規表現

正規表現を使用して、クエリ文字列を抽出します。

var url = 'https://example.com/page?param1=value1&param2=value2';
var queryString = url.match(/\?(.+)/)[1];

• 正規表現を使用する場合は、適切な正規表現パターンを使用する必要があります。
• URLSearchParams オブジェクトは、クエリ文字列を解析して、キーと値のペアを取得します。
• location.search プロパティは、クエリ文字列全体を取得します。