JavaScriptでクエリ文字列の値を取得するにはどうしたらいいですか？

jQueryを使って（あるいは使わずに）、プラグインなしでクエリ文字列の値を取得する方法はありますか？

あるとすれば、どのようにして？ない場合は、それを可能にするプラグインはありますか？

Brad Larson
編集された質問 7日 4月 2015 в 12:55
プログラミング
plugins query-string javascript url
23日 5月 2009 в 8:10
24 ビュー
ソリューション

更新日：9月-2018年。

URLSearchParams]1はシンプルで、まともな（完全ではない）ブラウザサポートを備えています。

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

原文のまま。

この目的のためにjQueryは必要ありません。純粋なJavaScriptを使えばいいのです。

function getParameterByName(name, url) {
    if (!url) 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)を取得します。これについての標準はなく、使用方法も様々です。例えば、この質問をご覧ください。Authoritative position of duplicate HTTP GET query keysを参照してください。
注意: この関数は、大文字と小文字を区別します。大文字小文字を区別しないパラメータ名を希望する場合は、RegExpに'i'修飾子を追加してください。

これは新しいURLSearchParams specsに基づいたアップデートで、同じ結果をより簡潔に実現するためのものです。後述の「URLSearchParams」というタイトルの回答を参照してください。

Martin Tournoij
編集した答え 6日 8月 2019 в 7:12
解説 (52)

snipplr.comのRoshambo氏は、Get URL Parameters with jQuery | Improvedで紹介されているように、これを実現するシンプルなスクリプトを持っています。このスクリプトでは、必要なパラメータだけを簡単に取り出すことができます。

以下にその概要を紹介する。

$.urlParam = function(name, url) {
    if (!url) {
     url = window.location.href;
    }
    var results = new RegExp('[\\?&]' + name + '=([^&#]*)').exec(url);
    if (!results) { 
        return undefined;
    }
    return results[1] || undefined;
}

あとは、クエリ文字列からパラメータを取得するだけです。

つまり、URL/クエリー文字列が xyz.com/index.html?lang=de だった場合。

var langval = $.urlParam('lang');`を呼べばOKです。

UZBEKJONさんのブログでも、Get URL parameters & values with jQueryという素晴らしい記事が紹介されています。

Yahel
編集した答え 4日 2月 2016 в 6:51
解説 (3)

jQueryを使用している場合は、jQuery BBQ: Back Button & Query Libraryのようなライブラリを使用することができます。

...jQuery BBQは、完全な.depasam()メソッドを提供するとともに、ハッシュの状態管理、フラグメント／クエリ文字列のパースとマージのユーティリティーメソッドを提供します。

編集：Deparamの例を追加。

。

 var DeparamExample = function() {
            var params = $.deparam.querystring();

            //nameofparam is the name of a param from url
            //code below will get param if ajax refresh with hash
            if (typeof params.nameofparam == 'undefined') {
                params = jQuery.deparam.fragment(window.location.href);
            }

            if (typeof params.nameofparam != 'undefined') {
                var paramValue = params.nameofparam.toString();

            }
        };

もし、普通のJavaScriptを使いたいのであれば...

var getParamValue = (function() {
    var params;
    var resetParams = function() {
            var query = window.location.search;
            var regex = /[?&;](.+?)=([^&;]+)/g;
            var match;

            params = {};

            if (query) {
                while (match = regex.exec(query)) {
                    params[match[1]] = decodeURIComponent(match[2]);
                }
            }    
        };

    window.addEventListener
    && window.addEventListener('popstate', resetParams);

    resetParams();

    return function(param) {
        return params.hasOwnProperty(param) ? params[param] : null;
    }

})();​

新しい HTML History API、特に history.pushState() と history.replaceState() のおかげで、URL が変更され、パラメータとその値のキャッシュが無効になることがあります。

このバージョンでは、履歴が変更されるたびに、パラメータの内部キャッシュが更新されます。

Ben Call
編集した答え 9日 10月 2014 в 4:13
解説 (0)