JavaScript でクエリ文字列の値を取得するにはどうすればいいですか? 質問する

Question

使用URL検索パラメータクエリ文字列からパラメータを取得します。

例えば：

const urlParams = new URLSearchParams(window.location.search);
const myParam = urlParams.get('myParam');

更新: 2022年1月

使用Proxy()はもっと早く使用するよりもObject.fromEntries()より優れたサポートが受けられます。

このアプローチには、クエリパラメータを反復処理できなくなるという注意点があります。

const params = new Proxy(new URLSearchParams(window.location.search), {
  get: (searchParams, prop) => searchParams.get(prop),
});
// Get the value of "some_key" in eg "https://example.com/?some_key=some_value"
let value = params.some_key; // "some_value"

更新: 2021年6月

すべてのクエリパラメータが必要な特定のケース:

const urlSearchParams = new URLSearchParams(window.location.search);
const params = Object.fromEntries(urlSearchParams.entries());

更新: 2018年9月

使用できますURL検索パラメータシンプルで適切な（ただし完全ではない）ブラウザサポート。

const urlParams = new URLSearchParams(window.location.search);
const myParam = urlParams.get('myParam');

オリジナル

この目的には jQuery は必要ありません。純粋な JavaScript だけを使用できます。

function getParameterByName(name, url = window.location.href) {
    name = name.replace(/[\[\]]/g, '\\$&');
    var regex = new RegExp('[?&]' + name + '(=([^&#]*)|&|#|$)'),
        results = regex.exec(url);
    if (!results) return null;
    if (!results[2]) return '';
    return decodeURIComponent(results[2].replace(/\+/g, ' '));
}

使用法：

// query string: ?foo=lorem&bar=&baz
var foo = getParameterByName('foo'); // "lorem"
var bar = getParameterByName('bar'); // "" (present with empty value)
var baz = getParameterByName('baz'); // "" (present with no value)
var qux = getParameterByName('qux'); // null (absent)

注意: パラメータが複数回存在する場合 ( ?foo=lorem&foo=ipsum)、最初の値 ( ) が取得されますlorem。これについては標準はなく、使用法はさまざまです。たとえば、次の質問を参照してください。重複した HTTP GET クエリキーの権威ある位置。

注意: この関数は大文字と小文字を区別します。大文字と小文字を区別しないパラメータ名を使用する場合は、RegExpに「i」修飾子を追加する

注: no-useless-escape eslint エラーが発生する場合は、name = name.replace(/[\[\]]/g, '\\$&');に置き換えることができますname = name.replace(/[[\]]/g, '\\$&')。

これは新しいURLSearchParams 仕様同じ結果をより簡潔に得るには、「URL検索パラメータ" 下に。

Answer 1