javascript - 受け取り - location search jquery

JavaScriptでクエリ文字列値を取得するにはどうすればよいですか? (20)

jQueryを使用してクエリ文字列値を取得するプラグインレスの方法はありますか？

もしそうなら、どうですか？そうでない場合は、そうすることができるプラグインはありますか？

ES2015（ES6）

getQueryStringParams = query => {
    return query
        ? (/^[?#]/.test(query) ? query.slice(1) : query)
            .split('&')
            .reduce((params, param) => {
                    let [key, value] = param.split('=');
                    params[key] = value ? decodeURIComponent(value.replace(/\+/g, ' ')) : '';
                    return params;
                }, {}
            )
        : {}
};

jQueryなし

var qs = (function(a) {
    if (a == "") return {};
    var b = {};
    for (var i = 0; i < a.length; ++i)
    {
        var p=a[i].split('=', 2);
        if (p.length == 1)
            b[p[0]] = "";
        else
            b[p[0]] = decodeURIComponent(p[1].replace(/\+/g, " "));
    }
    return b;
})(window.location.search.substr(1).split('&'));

?topic=123&name=query+stringようなURLを指定すると、次のようになります。

qs["topic"];    // 123
qs["name"];     // query string
qs["nothere"];  // undefined (object)

Googleの方法

Googleのコードを裂く私は彼らが使用するメソッドを見つけた： getUrlParameters

function (b) {
    var c = typeof b === "undefined";
    if (a !== h && c) return a;
    for (var d = {}, b = b || k[B][vb], e = b[p]("?"), f = b[p]("#"), b = (f === -1 ? b[Ya](e + 1) : [b[Ya](e + 1, f - e - 1), "&", b[Ya](f + 1)][K](""))[z]("&"), e = i.dd ? ia : unescape, f = 0, g = b[w]; f < g; ++f) {
        var l = b[f][p]("=");
        if (l !== -1) {
            var q = b[f][I](0, l),
                l = b[f][I](l + 1),
                l = l[Ca](/\+/g, " ");
            try {
                d[q] = e(l)
            } catch (A) {}
        }
    }
    c && (a = d);
    return d
}

それは難読化されていますが、理解できます。

彼らはURLからパラメータを探すようになります? またハッシュからも# 。次に、各パラメータについて等号b[f][p]("=") （ indexOfように見えますが、キーの値を得るためにcharの位置を使用します）で分割します。それを分割すると、パラメータに値があるかどうかがチェックされます。パラメータの値が格納されていれば、 dの値が格納されます。

最後にオブジェクトdが返され、エスケープと+記号を処理します。このオブジェクトはちょうど私のようなもので、同じ動作をします。

jQueryプラグインとしての私のメソッド

(function($) {
    $.QueryString = (function(paramsArray) {
        let params = {};

        for (let i = 0; i < paramsArray.length; ++i)
        {
            let param = paramsArray[i]
                .split('=', 2);

            if (param.length !== 2)
                continue;

            params[param[0]] = decodeURIComponent(param[1].replace(/\+/g, " "));
        }

        return params;
    })(window.location.search.substr(1).split('&'))
})(jQuery);

使用法

//Get a param
$.QueryString.param
//-or-
$.QueryString["param"]
//This outputs something like...
//"val"

//Get all params as object
$.QueryString
//This outputs something like...
//Object { param: "val", param2: "val" }

//Set a param (only in the $.QueryString object, doesn't affect the browser's querystring)
$.QueryString.param = "newvalue"
//This doesn't output anything, it just updates the $.QueryString object

//Convert object into string suitable for url a querystring (Requires jQuery)
$.param($.QueryString)
//This outputs something like...
//"param=newvalue&param2=val"

//Update the url/querystring in the browser's location bar with the $.QueryString object
history.replaceState({}, '', "?" + $.param($.QueryString));
//-or-
history.pushState({}, '', "?" + $.param($.QueryString));

パフォーマンステスト（正規表現法に対する分割方法）（ jsPerf ）

準備コード：メソッド宣言

分割テストコード

var qs = window.GetQueryString(query);

var search = qs["q"];
var value = qs["value"];
var undef = qs["undefinedstring"];

正規表現のテストコード

var search = window.getParameterByName("q");
var value = window.getParameterByName("value");
var undef = window.getParameterByName("undefinedstring");

Windows Server 2008 R2 / 7 x64上のFirefox 4.0 x86でのテスト

スプリット方法 ：144,780±2.17％最速
正規表現法 ：13,891±0.85％| 90％遅く

URLSearchParams

Firefox 44+、Opera 36+、Edge 17+、Safari 10.3+、Chrome 49+はURLSearchParams APIをサポートしています：

IEの安定版用にGoogleが推奨するURLSearchParamsポリフィルがあります。

W3Cでは標準化されていませんが、 WhatWGの生活規格です。

あなたは場所でそれを使うことができますが、あなたはそれを削除する必要があります? 疑問符（たとえば、 .slice(1) ）：

let params = new URLSearchParams(location.search);

または

let params = (new URL(location)).searchParams;

もちろん、どんなURLでも：

let url = new URL('https://example.com?foo=1&bar=2');
let params = new URLSearchParams(url.search);

次のように、URLオブジェクトの短縮形.searchParamsプロパティを使用してparamsを取得することもできます。

let params = new URL('https://example.com?foo=1&bar=2').searchParams;
params.get('foo'); // "1"
params.get('bar'); // "2"

get(KEY) 、 set(KEY, VALUE) 、 append(KEY, VALUE) APIを使用してパラメータを読み取り/設定します。またfor (let p of params) {}すべての値for (let p of params) {}反復処理することもできます。

参照実装とサンプルページは、監査とテストに使用できます。

Andy Eの優れたソリューションを完全な本格的なjQueryプラグインにすることは、私のスタブです：

;(function ($) {
    $.extend({      
        getQueryString: function (name) {           
            function parseParams() {
                var params = {},
                    e,
                    a = /\+/g,  // Regex for replacing addition symbol with a space
                    r = /([^&=]+)=?([^&]*)/g,
                    d = function (s) { return decodeURIComponent(s.replace(a, " ")); },
                    q = window.location.search.substring(1);

                while (e = r.exec(q))
                    params[d(e[1])] = d(e[2]);

                return params;
            }

            if (!this.queryStringParams)
                this.queryStringParams = parseParams(); 

            return this.queryStringParams[name];
        }
    });
})(jQuery);

構文は次のとおりです。

var someVar = $.getQueryString('myParam');

両方の長所！

PHP $_GET配列に似たオブジェクトを$_GET取得する方法は次のとおりです：

function get_query(){
    var url = location.search;
    var qs = url.substring(url.indexOf('?') + 1).split('&');
    for(var i = 0, result = {}; i < qs.length; i++){
        qs[i] = qs[i].split('=');
        result[qs[i][0]] = decodeURIComponent(qs[i][1]);
    }
    return result;
}

使用法：

var $_GET = get_query();

クエリ文字列x=5&y&z=hello&x=6これはオブジェクトを返します。

{
  x: "6",
  y: undefined,
  z: "hello"
}

snipplr.comのRoshamboには、これを実現するための簡単なスクリプトがあります.jQueryでURLパラメータを取得する| 改良された 。彼のスクリプトでは、必要なパラメータだけを簡単に引き出すことも容易にできます。

要点は次のとおりです。

$.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');呼び出すだけvar langval = $.urlParam('lang'); あなたはそれを持っています。

UZBEKJONにもこれに関する素晴らしいブログ記事があります.jQueryでURLパラメータと値を取得してください 。

Artem Bargerの答えの改良版：

function getParameterByName(name) {
    var match = RegExp('[?&]' + name + '=([^&]*)').exec(window.location.search);
    return match && decodeURIComponent(match[1].replace(/\+/g, ' '));
}

改善の詳細については、 http://james.padolsey.com/javascript/bujs-1-getparameterbyname/ ： http://james.padolsey.com/javascript/bujs-1-getparameterbyname/参照してください。

Roshambo jQueryメソッドがデコードURLの世話をしていない

http://snipplr.com/view/26662/get-url-parameters-with-jquery--improved/

returnステートメントを追加するときにその機能を追加しました

return decodeURIComponent(results[1].replace(/\+/g, " ")) || 0;

今すぐ更新された要点を見つけることができます：

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

ここに掲載されたソリューションの中には、非効率的なものがあります。スクリプトがパラメータにアクセスする必要があるたびに正規表現検索を繰り返すことは、パラメータを連想配列スタイルのオブジェクトに分割する1つの関数で十分です。 HTML 5履歴APIを使用していない場合は、1ページに1回だけ読み込む必要があります。ここの他の提案もURLを正しく解読できません。

var urlParams;
(window.onpopstate = function () {
    var match,
        pl     = /\+/g,  // Regex for replacing addition symbol with a space
        search = /([^&=]+)=?([^&]*)/g,
        decode = function (s) { return decodeURIComponent(s.replace(pl, " ")); },
        query  = window.location.search.substring(1);

    urlParams = {};
    while (match = search.exec(query))
       urlParams[decode(match[1])] = decode(match[2]);
})();

クエリーストリングの例：

?i=main&mode=front&sid=de8d49b78a85a322c4155015fdce22c4&enc=+Hello%20&empty

結果：

 urlParams = {
    enc: " Hello ",
    i: "main",
    mode: "front",
    sid: "de8d49b78a85a322c4155015fdce22c4",
    empty: ""
}

alert(urlParams["mode"]);
// -> "front"

alert("empty" in urlParams);
// -> true

これは配列スタイルのクエリ文字列を扱うためにも簡単に改良することができます。これの例がhereにありhereが、配列スタイルのパラメータはRFC 3986で定義されていないので、私はこの回答をソースコードで汚染しません。 "汚染された"バージョンに興味がある人は、下記のcampbelnの答えを見てください。

また、コメントで指摘されているように; key=valueペアのための有効な区切り文字です。それはより複雑な正規表現を扱う必要があり; それはまれですので、私は不要だと思います; 両方が使用されることはないと私はさらに言います。あなたがサポートする必要がある場合; &代わりに正規表現でスワップするだけです。

サーバー側の前処理言語を使用している場合は、ネイティブなJSON関数を使用して大変な作業をすることができます。たとえば、PHPでは次のように記述できます。

<script>var urlParams = <?php echo json_encode($_GET, JSON_HEX_TAG);?>;</script>

もっと簡単！

その質問の上の答えの問題は、サポートされていないパラメータが＃の後に置かれていることですが、この値を取得する必要があることもあります。

答えを変更して、完全なクエリ文字列をハッシュ記号でも解析できるようにしました：

var getQueryStringData = function(name) {
    var result = null;
    var regexS = "[\\?&#]" + name + "=([^&#]*)";
    var regex = new RegExp(regexS);
    var results = regex.exec('?' + window.location.href.split('?')[1]);
    if (results != null) {
        result = decodeURIComponent(results[1].replace(/\+/g, " "));
    }
    return result;
};

ちょうど2つの分割を使用してください：

function get(n) {
    var half = location.search.split(n + '=')[1];
    return half !== undefined ? decodeURIComponent(half.split('&')[0]) : null;
}

私は以前のより完全な答えをすべて読んでいました。しかし、私はそれが最も簡単で速い方法だと思います。このjsPerf benchmarkチェックインできbenchmark

Rupのコメントの問題を解決するには、最初の行を以下の2行に変更して条件付き分割を追加します。しかし、絶対精度はregexpよりも遅いことを意味します（ jsPerf参照）。

function get(n) {
    var half = location.search.split('&' + n + '=')[1];
    if (!half) half = location.search.split('?' + n + '=')[1];
    return half !== undefined ? decodeURIComponent(half.split('&')[0]) : null;
}

あなたがRupのカウンターケースに遭遇しないことを知っているなら、これが勝ちます。そうでなければ、regexp。

または 、クエリ文字列を制御でき、取得しようとしている値にURLエンコードされた文字が含まれないことが保証されている場合（これらの値を持つことは悪い考えです）、次のやや簡潔で読みやすいバージョンを使用できます最初のオプションの：
    function getQueryStringValueByName(name) {
        var queryStringFromStartOfValue = location.search.split(name + '=')[1];
         return queryStringFromStartOfValue !== undefined ? queryStringFromStartOfValue.split('&')[0] : null;

コードゴルフ：

var a = location.search&&location.search.substr(1).replace(/\+/gi," ").split("&");
for (var i in a) {
    var s = a[i].split("=");
    a[i]  = a[unescape(s[0])] = unescape(s[1]);
}

それを表示する！

for (i in a) {
    document.write(i + ":" + a[i] + "<br/>");   
};

私のMacでは：test.htm?i=can&has=cheezburgerディスプレイ

0:can
1:cheezburger
i:can
has:cheezburger

単にURI.js文字列を解析するよりも多くのURL操作を行っているなら、 URI.js役立つかもしれません。これはURLを操作するためのライブラリであり、すべての鐘と笛が付属しています。（自己紹介に申し訳ありません）

クエリ文字列をマップに変換する：

var data = URI('?foo=bar&bar=baz&foo=world').query(true);
data == {
  "foo": ["bar", "world"],
  "bar": "baz"
}

（URI.jsは?&foo&&bar=baz& ?foo&bar=bazような不正なクエリーストリングも "修正"し?foo&bar=baz ）

私はRyan Phelanのソリューションが好きです。しかし、私はそれのためにjQueryを拡張することについて何のポイントも見ませんか？ jQueryの機能は使用されません。

一方、私はGoogle Chromeの組み込み関数window.location.getParameterが好きです。

では、なぜこれを使わないのですか？さて、他のブラウザは持っていません。この関数が存在しない場合は作成しましょう：

if (!window.location.getParameter ) {
  window.location.getParameter = function(key) {
    function parseParams() {
        var params = {},
            e,
            a = /\+/g,  // Regex for replacing addition symbol with a space
            r = /([^&=]+)=?([^&]*)/g,
            d = function (s) { return decodeURIComponent(s.replace(a, " ")); },
            q = window.location.search.substring(1);

        while (e = r.exec(q))
            params[d(e[1])] = d(e[2]);

        return params;
    }

    if (!this.queryStringParams)
        this.queryStringParams = parseParams(); 

    return this.queryStringParams[key];
  };
}

この関数はRyan Phelanの多かれ少なかれですが、他のjavascriptライブラリーの名前の明確化と依存関係がありません。私のブログでこの機能について詳しく知りました。

私は正規表現をたくさん使いますが、そうではありません。

私のアプリケーションでクエリ文字列を一度読み取って、すべてのキーと値のペアからオブジェクトを作成する方が簡単で効率的です。

var search = function() {
  var s = window.location.search.substr(1),
    p = s.split(/\&/), l = p.length, kv, r = {};
  if (l === 0) {return false;}
  while (l--) {
    kv = p[l].split(/\=/);
    r[kv[0]] = decodeURIComponent(kv[1] || '') || true;
  }
  return r;
}();

以下のようなURLのためにhttp://domain.com?param1=val1&param2=val2、あなたは後のコードでとしての価値を得ることができますsearch.param1し、search.param2。

MDNから：

function loadPageVar (sVar) {
  return unescape(window.location.search.replace(new RegExp("^(?:.*[&\\?]" + escape(sVar).replace(/[\.\+\*]/g, "\\$&") + "(?:\\=([^&]*))?)?.*$", "i"), "$1"));
}

alert(loadPageVar("name"));

Andy Eの "Handle array-style query strings" -versionの拡張版があります。バグを修正（?key=1&key[]=2&key[]=3; 1失わで置き換えられる[2,3]）、（「[」位置、等を再計算、値の再復号化）いくつかのマイナーなパフォーマンスの向上を行い、（官能化のサポート多くの改良を加え?key=1&key=2ため、サポート;デリミタ）。私は変数を面倒に短くしましたが、読みやすくするためのコメントを追加しました（ああ、私vはローカル関数内で再利用しました。混乱してもごめんなさい）。

それは、次のクエリ文字列を処理します...

？test = Hello＆person = neek＆person [] = jeff＆person [] = jim＆person [extra] = john＆test3＆nocache = 1398914891264

...そのように見えるオブジェクトにする...

{
    "test": "Hello",
    "person": {
        "0": "neek",
        "1": "jeff",
        "2": "jim",
        "length": 3,
        "extra": "john"
    },
    "test3": "",
    "nocache": "1398914891264"
}

あなたは上記を参照できるように、このバージョンでは、「不正な」配列、すなわちいくつかの指標を扱う- person=neek&person[]=jeff&person[]=jimまたはperson=neek&person=jeff&person=jimキーとして（少なくともDOTNETの中に識別し、有効であるNameValueCollection.Add）：

指定されたキーがすでにターゲットのNameValueCollectionインスタンスに存在する場合、指定された値は、カンマで区切られた値のリストに "value1、value2、value3"の形式で追加されます。

それは仕様がないので、陪審員は繰り返しキーで多少出ているようです。この場合、複数のキーが（擬似）配列として格納されます。しかし、コンマを基にした値は配列に処理しないことに注意してください。

コード：

getQueryStringKey = function(key) {
    return getQueryStringAsObject()[key];
};


getQueryStringAsObject = function() {
    var b, cv, e, k, ma, sk, v, r = {},
        d = function (v) { return decodeURIComponent(v).replace(/\+/g, " "); }, //# d(ecode) the v(alue)
        q = window.location.search.substring(1), //# suggested: q = decodeURIComponent(window.location.search.substring(1)),
        s = /([^&;=]+)=?([^&;]*)/g //# original regex that does not allow for ; as a delimiter:   /([^&=]+)=?([^&]*)/g
    ;

    //# ma(make array) out of the v(alue)
    ma = function(v) {
        //# If the passed v(alue) hasn't been setup as an object
        if (typeof v != "object") {
            //# Grab the cv(current value) then setup the v(alue) as an object
            cv = v;
            v = {};
            v.length = 0;

            //# If there was a cv(current value), .push it into the new v(alue)'s array
            //#     NOTE: This may or may not be 100% logical to do... but it's better than loosing the original value
            if (cv) { Array.prototype.push.call(v, cv); }
        }
        return v;
    };

    //# While we still have key-value e(ntries) from the q(uerystring) via the s(earch regex)...
    while (e = s.exec(q)) { //# while((e = s.exec(q)) !== null) {
        //# Collect the open b(racket) location (if any) then set the d(ecoded) v(alue) from the above split key-value e(ntry) 
        b = e[1].indexOf("[");
        v = d(e[2]);

        //# As long as this is NOT a hash[]-style key-value e(ntry)
        if (b < 0) { //# b == "-1"
            //# d(ecode) the simple k(ey)
            k = d(e[1]);

            //# If the k(ey) already exists
            if (r[k]) {
                //# ma(make array) out of the k(ey) then .push the v(alue) into the k(ey)'s array in the r(eturn value)
                r[k] = ma(r[k]);
                Array.prototype.push.call(r[k], v);
            }
            //# Else this is a new k(ey), so just add the k(ey)/v(alue) into the r(eturn value)
            else {
                r[k] = v;
            }
        }
        //# Else we've got ourselves a hash[]-style key-value e(ntry) 
        else {
            //# Collect the d(ecoded) k(ey) and the d(ecoded) sk(sub-key) based on the b(racket) locations
            k = d(e[1].slice(0, b));
            sk = d(e[1].slice(b + 1, e[1].indexOf("]", b)));

            //# ma(make array) out of the k(ey) 
            r[k] = ma(r[k]);

            //# If we have a sk(sub-key), plug the v(alue) into it
            if (sk) { r[k][sk] = v; }
            //# Else .push the v(alue) into the k(ey)'s array
            else { Array.prototype.push.call(r[k], v); }
        }
    }

    //# Return the r(eturn value)
    return r;
};

これは私が後で作成した関数であり、私は非常に満足しています。大文字と小文字は区別されません。これは便利です。また、要求されたQSが存在しない場合は、空の文字列を返します。

私はこれを圧縮したものを使用します。私は初心者のために非圧縮形式で投稿しています。何が起こっているのかを詳しく説明しています。

私はこれが最適化されているか、より速く動作するために別々に実行されると確信していますが、常に必要なものに対してはうまく機能しています。

楽しい。

function getQSP(sName, sURL) {
    var theItmToRtn = "";
    var theSrchStrg = location.search;
    if (sURL) theSrchStrg = sURL;
    var sOrig = theSrchStrg;
    theSrchStrg = theSrchStrg.toUpperCase();
    sName = sName.toUpperCase();
    theSrchStrg = theSrchStrg.replace("?", "&") theSrchStrg = theSrchStrg + "&";
    var theSrchToken = "&" + sName + "=";
    if (theSrchStrg.indexOf(theSrchToken) != -1) {
        var theSrchTokenLth = theSrchToken.length;
        var theSrchTokenLocStart = theSrchStrg.indexOf(theSrchToken) + theSrchTokenLth;
        var theLocOfNextAndSign = theSrchStrg.indexOf("&", theSrchTokenLocStart);
        theItmToRtn = unescape(sOrig.substring(theSrchTokenLocStart, theLocOfNextAndSign));
    }
    return unescape(theItmToRtn);
}

私はこれが好きです（jquery-howto.blogspot.co.ukから撮影）：

// get an array with all querystring values
// example: var valor = getUrlVars()["valor"];
function getUrlVars() {
    var vars = [], hash;
    var hashes = window.location.href.slice(window.location.href.indexOf('?') + 1).split('&');
    for (var i = 0; i < hashes.length; i++) {
        hash = hashes[i].split('=');
        vars.push(hash[0]);
        vars[hash[0]] = hash[1];
    }
    return vars;
}

私にとって素晴らしい作品です。

function GET() {
        var data = [];
        for(x = 0; x < arguments.length; ++x)
            data.push(location.href.match(new RegExp("/\?".concat(arguments[x],"=","([^\n&]*)")))[1])
                return data;
    }


example:
data = GET("id","name","foo");
query string : ?id=3&name=jet&foo=b
returns:
    data[0] // 3
    data[1] // jet
    data[2] // b
or
    alert(GET("id")[0]) // return 3

function GetQueryStringParams(sParam)
{
    var sPageURL = window.location.search.substring(1);
    var sURLVariables = sPageURL.split('&');

    for (var i = 0; i < sURLVariables.length; i++)
    {
        var sParameterName = sURLVariables[i].split('=');
        if (sParameterName[0] == sParam)
        {
            return sParameterName[1];
        }
    }
}

そして、これはあなたがURLを前提としてこの関数を使う方法です

http://dummy.com/?stringtext=jquery&stringword=jquerybyexample

var tech = GetQueryStringParams('stringtext');
var blog = GetQueryStringParams('stringword');