it-swarm.asia

JavaScript'te sorgu dizesi değerlerini nasıl alabilirim?

JQuery aracılığıyla (veya olmadan) query string değerlerini almanın eklenti olmadan bir yolu var mı?

Öyleyse nasıl? Değilse, bunu yapabilen bir eklenti var mı?

2701
Kemal Emin

Güncelleme: Eylül-2018

Basit ve iyi tarayıcı desteği olan URLSearchParams kullanabilirsiniz.

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

Orijinal

Bu amaç için jQuery'e ihtiyacınız yok. Sadece bazı saf JavaScript kullanabilirsiniz:

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, ' '));
}

Kullanım:

// 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)


Not: Bir parametre birkaç kez mevcutsa (?foo=lorem&foo=ipsum), ilk değeri elde edersiniz (lorem). Bu konuda standart yoktur ve kullanımlar değişkenlik gösterir, örneğin şu soruya bakın: yinelenen HTTP GET sorgu anahtarlarının yetkili konumu .
NOT: İşlev büyük/küçük harf duyarlıdır. Büyük/küçük harf duyarlı parametre adını tercih ederseniz, RegExp'e 'i' değiştiricisini ekleyin


Bu, aynı sonucu daha başarılı bir şekilde elde etmek için yeni URLSearchParams specs temelli bir güncellemedir. Aşağıdaki " URLSearchParams " başlıklı cevaba bakınız.

7640
Artem Barger

Buraya gönderilen çözümlerin bazıları yetersizdir. Kodun bir parametreye erişmesi gerektiğinde normal ifade aramasını yinelemek, tamamen gereksizdir, parametreleri bir ilişkisel dizi stil nesnesine bölmek için tek bir işlev yeterlidir. HTML 5 Geçmişi API ile çalışmıyorsanız, bu sayfa başına yalnızca bir kez gereklidir. Buradaki diğer öneriler de URL’yi doğru şekilde çözemez.

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]);
})();

Örnek sorgulayıcı:

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

Sonuç:

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

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

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

Bu, dizi stili sorgu dizgilerini de işlemek için kolayca geliştirilebilir. Bunun bir örneği here , ancak dizi stili parametreleri RFC 3986 içinde tanımlanmadığından bu cevabı kaynak kodla kirletmeyeceğim. "Kirli" bir sürümle ilgilenenler için, aşağıdaki kamp çantasının yanıtına bakın .

Ayrıca, yorumlarda da belirtildiği gibi, ;, key=value çiftleri için yasal bir sınırlayıcıdır. ; veya &'yu işlemek için daha karmaşık bir regex gerektirecektir, çünkü bence gereksizdir, çünkü ;'un kullanılması nadirdir ve her ikisinin de kullanılması ihtimalinin daha düşük olduğunu söyleyebilirim. ; yerine &'yi desteklemeniz gerekiyorsa, bunları yalnızca regex'te değiştirin.


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

Çok daha basit!

1666
Andy E

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 olmadan

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 gibi bir URL ile aşağıdakiler döndürülür:

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

Google yöntemi

Google’ın kodunu yırtmak Kullandıkları yöntemi buldum: 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
}

Bu gizlenmiş, ancak anlaşılabilir bir durumdur. Çalışmıyor çünkü bazı değişkenler tanımsız.

URL'deki parametreleri ? adresinden ve ayrıca karma # öğesinden aramaya başlarlar. Daha sonra her bir parametre için b[f][p]("=") (indexOf gibi görünen) eşit işaretine bölünürler, anahtarı/değeri almak için char'in konumunu kullanırlar. Bölünerek parametrenin bir değeri olup olmadığını kontrol ederler, eğer varsa d değerini saklarlar, aksi takdirde devam ederler.

Sonunda, d nesnesi kaçar ve + işaretini ele alır. Bu nesne benimki gibi, aynı davranışa sahip.


Benim yöntem olarak jQuery eklentisi

(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);

Kullanım

//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));

Performans testi (regex yöntemine göre bölme yöntemi) ( jsPerf )

Hazırlık kodu: yöntem bildirimi

Test kodunu böl

var qs = window.GetQueryString(query);

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

Regex test kodu

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

Windows Server 2008 R2/7 x64'te Firefox 4.0 x86’da test

  • Bölme yöntemi: 144,780 ± 2,17% en hızlı
  • Regex yöntemi: 13,891 ±% 0,85 | % 90 daha yavaş
1244
BrunoLM

Artem Barger'ın cevabının geliştirilmiş versiyonu :

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

İyileştirme hakkında daha fazla bilgi için bakınız: http://james.padolsey.com/javascript/bujs-1-getparameterbyname/

650
James

URLSearchParams

Firefox 44+, Opera 36+, Edge 17+, Safari 10.3+ ve Chrome 49+, URLSearchParams API özelliğini destekler:

IE'nin kararlı sürümleri için bir google önerilmişURLSEARCHPARAMS POLYFILLvar.

W3C tarafından standartlaştırılmamıştır, ancak WhatWG tarafından yaşam standardıdır.

Yerinde kullanabilirsiniz, ancak ? soru işaretini kaldırmanız gerekir (örneğin, .slice(1) ile):

let params = new URLSearchParams(location.search);

veya

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

Veya herhangi bir URL’de elbette:

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

URL nesnesindeki bir shorthand .searchParams özelliğini kullanarak params elde edebilirsiniz, şunun gibi:

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

Parametreleri get(KEY), set(KEY, VALUE), append(KEY, VALUE) API ile okuyup ayarlarsınız. Ayrıca, for (let p of params) {} tüm değerlerini yineleyebilirsiniz.

Denetim ve test için başvuru uygulaması ve örnek sayfa kullanılabilir.

541
Paul Sweatte

Sadece başka bir öneri.Purleklentisi, çapa, Ana Bilgisayar vb. Dahil olmak üzere URL’nin tüm bölümlerini almaya izin verir.

JQuery ile veya jQuery olmadan kullanılabilir.

Kullanımı çok basit ve güzel:

var url = $.url('http://allmarkedup.com/folder/dir/index.html?item=value'); // jQuery version
var url = purl('http://allmarkedup.com/folder/dir/index.html?item=value'); // plain JS version
url.attr('protocol'); // returns 'http'
url.attr('path'); // returns '/folder/dir/index.html'

Ancak, 11 Kasım 2014 itibariyle, Purl artık korunmuyor ve yazar bunun yerine URI.js kullanılmasını önermektedir. JQuery eklentisi, elemanlara odaklanmasından farklıdır - dizelerle kullanım için, doğrudan jQuery ile veya jQuery olmadan URI kullanın. Benzer kod şöyle görünecektir, daha dolu belgeler burada :

var url = new URI('http://allmarkedup.com/folder/dir/index.html?item=value'); // plain JS version
url.protocol(); // returns 'http'
url.path(); // returns '/folder/dir/index.html'
398
AlfaTeK

tl; dr

Hızlı = komple bir çözüm , ki çok değerli tuşları ve kodlanmış karakterler .

var qd = {};
if (location.search) location.search.substr(1).split("&").forEach(function(item) {var s = item.split("="), k = s[0], v = s[1] && decodeURIComponent(s[1]); (qd[k] = qd[k] || []).Push(v)})

//using ES6   (23 characters cooler)
var qd = {};
if (location.search) location.search.substr(1).split`&`.forEach(item => {let [k,v] = item.split`=`; v = v && decodeURIComponent(v); (qd[k] = qd[k] || []).Push(v)})
var qd = {};
if (location.search) location.search.substr(1).split("&").forEach(function(item) {
    var s = item.split("="),
        k = s[0],
        v = s[1] && decodeURIComponent(s[1]); //  null-coalescing / short-circuit
    //(k in qd) ? qd[k].Push(v) : qd[k] = [v]
    (qd[k] = qd[k] || []).Push(v) // null-coalescing / short-circuit
})

Bütün bu kod nedir?.
"boş birleştirme" , kısa devre değerlendirmesi
ES6 Yıkıcı ödevler , Ok işlevleri , Şablon dizeleri

"?a=1&b=0&c=3&d&e&a=5&a=t%20e%20x%20t&e=http%3A%2F%2Fw3schools.com%2Fmy%20test.asp%3Fname%3Dståle%26car%3Dsaab"
> qd
a: ["1", "5", "t e x t"]
b: ["0"]
c: ["3"]
d: [undefined]
e: [undefined, "http://w3schools.com/my test.asp?name=ståle&car=saab"]

> qd.a[1]    // "5"
> qd["a"][1] // "5"



Devamını oku ... Vanilya JavaScript çözümü hakkında.

Bir URL’nin farklı bölümlerine erişmek için location.(search|hash) işlevini kullanın

En kolay (sahte) çözüm

var queryDict = {};
location.search.substr(1).split("&").forEach(function(item) {queryDict[item.split("=")[0]] = item.split("=")[1]})
  • Kolları boş anahtarlar doğru şekilde.
  • Geçersiz kılar Çoklu tuşlar ile son değer bulundu.
"?a=1&b=0&c=3&d&e&a=5"
> queryDict
a: "5"
b: "0"
c: "3"
d: undefined
e: undefined

Çok değerli anahtarlar

Basit anahtar kontrolü (item in dict) ? dict.item.Push(val) : dict.item = [val]

var qd = {};
location.search.substr(1).split("&").forEach(function(item) {(item.split("=")[0] in qd) ? qd[item.split("=")[0]].Push(item.split("=")[1]) : qd[item.split("=")[0]] = [item.split("=")[1]]})
  • Şimdi döner diziler yerine.
  • Erişim değerlerine qd.key[index] veya qd[key][index]
> qd
a: ["1", "5"]
b: ["0"]
c: ["3"]
d: [undefined]
e: [undefined]

Kodlanmış karakterler?

İkinci veya her ikisi de bölmeleri için decodeURIComponent() işlevini kullanın.

var qd = {};
location.search.substr(1).split("&").forEach(function(item) {var k = item.split("=")[0], v = decodeURIComponent(item.split("=")[1]); (k in qd) ? qd[k].Push(v) : qd[k] = [v]})
"?a=1&b=0&c=3&d&e&a=5&a=t%20e%20x%20t&e=http%3A%2F%2Fw3schools.com%2Fmy%20test.asp%3Fname%3Dståle%26car%3Dsaab"
> qd
a: ["1", "5", "t e x t"]
b: ["0"]
c: ["3"]
d: ["undefined"]  // decodeURIComponent(undefined) returns "undefined" !!!*
e: ["undefined", "http://w3schools.com/my test.asp?name=ståle&car=saab"]



Yorumlardan

* !!! Lütfen dikkat, decodeURIComponent(undefined), "undefined" dizesini döndürür. Çözüm, && 'nin basit bir kullanımında yatar ki bu, decodeURIComponent() işlevinin tanımsız değerlerde kullanılmamasını sağlar. (En üstteki "tam çözüme" bakınız.)

v = v && decodeURIComponent(v);


Querystring boşsa (location.search == ""), sonuç biraz yanıltıcı qd == {"": undefined} olur. Ayrıştırma işlevini başlatmadan önce sorgulayıcıyı kontrol etmeniz önerilir:

if (location.search) location.search.substr(1).split("&").forEach(...)
231
Qwerty

Snipplr.com'daki Roshambo,dizininde açıklanan URL dizgesini jQuery | Geliştirilmiş. Senaryo ile kolayca sadece istediğiniz parametreleri çıkarmak için olsun.

İşte Gist:

$.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;
}

Sonra sadece parametrelerinizi sorgu dizesinden alın.

Öyleyse eğer URL/sorgu dizesi xyz.com/index.html?lang=de ise.

Sadece var langval = $.urlParam('lang');'yi çağırın, anladınız.

UZBEKJON'un da bu konuda harika bir blog yazısı var,jQueryile URL parametrelerini ve değerlerini al.

216
brandonjp

JQuery kullanıyorsanız, jQuery BBQ: Geri Düğmesi ve Sorgu Kütüphanesi gibi bir kütüphane kullanabilirsiniz.

... jQuery BBQ, karma durum yönetimi ve fragman/sorgu dizesi ayrıştırma ve birleştirme yardımcı programı yöntemleriyle birlikte tam bir .deparam() yöntemi sağlar.

Düzenleme: Deparam Örneği Ekleme:

 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();
                  
            }
        };

Sadece düz JavaScript kullanmak istiyorsanız, ...

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;
    }

})();​

Yeni HTML Geçmişi API'si ve özellikle history.pushState() ve history.replaceState() nedeniyle, URL, parametre önbelleklerini ve değerlerini geçersiz kılacak şekilde değişebilir.

Bu sürüm, geçmiş her değiştiğinde, iç parametre önbelleğini günceller.

165
alex

Sadece iki kullanın bölme :

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

Önceki ve daha eksiksiz cevapları okuyordum. Ancak bunun en basit ve daha hızlı yöntem olduğunu düşünüyorum. Bu jsPerf benchmark 'ı inceleyebilirsiniz.

Rup'in yorumunda problemi çözmek için ilk çizgiyi aşağıdaki ikisine değiştirerek koşullu bir bölünme ekleyin. Ancak mutlak doğruluk, artık regexp'den daha yavaş olduğu anlamına gelir (bkz. 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;
}

Yani Rup'in karşı davaya girmeyeceğini biliyorsan, bu kazanır. Aksi takdirde, regexp.

Veya querystring'in kontrolünü ele geçirirseniz ve almaya çalıştığınız bir değerin hiçbir zaman URL kodlu karakterler içermediğini garanti ederseniz (bunları bir değerde bulundurmak kötü bir fikir olabilir) - aşağıdakileri biraz daha kullanabilirsiniz 1. seçeneğin basitleştirilmiş ve okunabilir versiyonu:

    function getQueryStringValueByName(name) {
        var queryStringFromStartOfValue = location.search.split(name + '=')[1];
         return queryStringFromStartOfValue !== undefined ? queryStringFromStartOfValue.split('&')[0] : null;
99
Martin Borthiry

İşte Andy E'nin mükemmel çözümünü tam teşekküllü bir jQuery eklentisi haline getirme konusundaki başarım:

;(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);

Sözdizimi:

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

Her iki dünyanın en iyisi!

94
Ryan Phelan

Sadece sorgulayıcıyı ayrıştırmaktan daha fazla URL manipülasyonu yapıyorsanız, URI.js helpful bulabilirsiniz. URL'leri değiştirmek için bir kütüphanedir - ve tüm çan ve ıslıklarla birlikte gelir. (Burada kendi kendine reklam verdiğim için üzgünüm)

querystring'inizi haritaya dönüştürmek için:

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

(URI.js ayrıca ?&foo&&bar=baz& - ?foo&bar=baz gibi kötü querystrings'leri "düzeltir")

76
rodneyrehm

Ryan Phelan'ın çözümünü severim. Ama bunun için jQuery'yi genişletmenin bir anlamı görmüyorum? JQuery işlevselliğinin kullanımı yoktur.

Öte yandan, Google Chrome'daki yerleşik işlevi seviyorum: window.location.getParameter.

Peki neden bunu kullanmıyorsun? Tamam, diğer tarayıcılarda yok. Öyleyse, yoksa bu işlevi yaratalım:

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];
  };
}

Bu işlev Ryan Phelan'dan az ya da çokdır, ancak farklı şekilde sarılır: net ad ve diğer javascript kütüphanelerinin bağımlılıkları yoktur. Blogumda bu işlev hakkında daha fazla bilgi .

59
Anatoly Mironov

PHP $ _GET array'e benzer bir nesneyi elde etmenin hızlı bir yolu:

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;
}

Kullanımı:

var $_GET = get_query();

Sorgusu x=5&y&z=hello&x=6 için bu nesneyi döndürür:

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

Basit JavaScript kodunda basit tutun:

function qs(key) {
    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[key];
}

JavaScript kodunda herhangi bir yerden arayın:

var result = qs('someKey');
52
Sagiv Ofek

Bunların hepsi harika cevaplar, ama biraz daha sağlam bir şeye ihtiyacım vardı ve yarattığım şeye sahip olmak isteyebileceğinizi düşündüm.

URL parametrelerinin diseksiyonu ve manipülasyonu yapan basit bir kütüphane yöntemidir. Statik yöntem, konu URL'sinde çağrılabilecek aşağıdaki alt yöntemlere sahiptir:

  • getHost
  • getPath
  • getHash
  • setHash
  • getParams
  • getQuery
  • setParam
  • getParam
  • hasParam
  • removeParam

Örnek:

URLParser(url).getParam('myparam1')

var url = "http://www.test.com/folder/mypage.html?myparam1=1&myparam2=2#something";

function URLParser(u){
    var path="",query="",hash="",params;
    if(u.indexOf("#") > 0){
        hash = u.substr(u.indexOf("#") + 1);
        u = u.substr(0 , u.indexOf("#"));
    }
    if(u.indexOf("?") > 0){
        path = u.substr(0 , u.indexOf("?"));
        query = u.substr(u.indexOf("?") + 1);
        params= query.split('&');
    }else
        path = u;
    return {
        getHost: function(){
            var hostexp = /\/\/([\w.-]*)/;
            var match = hostexp.exec(path);
            if (match != null && match.length > 1)
                return match[1];
            return "";
        },
        getPath: function(){
            var pathexp = /\/\/[\w.-]*(?:\/([^?]*))/;
            var match = pathexp.exec(path);
            if (match != null && match.length > 1)
                return match[1];
            return "";
        },
        getHash: function(){
            return hash;
        },
        getParams: function(){
            return params
        },
        getQuery: function(){
            return query;
        },
        setHash: function(value){
            if(query.length > 0)
                query = "?" + query;
            if(value.length > 0)
                query = query + "#" + value;
            return path + query;
        },
        setParam: function(name, value){
            if(!params){
                params= new Array();
            }
            params.Push(name + '=' + value);
            for (var i = 0; i < params.length; i++) {
                if(query.length > 0)
                    query += "&";
                query += params[i];
            }
            if(query.length > 0)
                query = "?" + query;
            if(hash.length > 0)
                query = query + "#" + hash;
            return path + query;
        },
        getParam: function(name){
            if(params){
                for (var i = 0; i < params.length; i++) {
                    var pair = params[i].split('=');
                    if (decodeURIComponent(pair[0]) == name)
                        return decodeURIComponent(pair[1]);
                }
            }
            console.log('Query variable %s not found', name);
        },
        hasParam: function(name){
            if(params){
                for (var i = 0; i < params.length; i++) {
                    var pair = params[i].split('=');
                    if (decodeURIComponent(pair[0]) == name)
                        return true;
                }
            }
            console.log('Query variable %s not found', name);
        },
        removeParam: function(name){
            query = "";
            if(params){
                var newparams = new Array();
                for (var i = 0;i < params.length;i++) {
                    var pair = params[i].split('=');
                    if (decodeURIComponent(pair[0]) != name)
                          newparams .Push(params[i]);
                }
                params = newparams;
                for (var i = 0; i < params.length; i++) {
                    if(query.length > 0)
                        query += "&";
                    query += params[i];
                }
            }
            if(query.length > 0)
                query = "?" + query;
            if(hash.length > 0)
                query = query + "#" + hash;
            return path + query;
        },
    }
}


document.write("Host: " + URLParser(url).getHost() + '<br>');
document.write("Path: " + URLParser(url).getPath() + '<br>');
document.write("Query: " + URLParser(url).getQuery() + '<br>');
document.write("Hash: " + URLParser(url).getHash() + '<br>');
document.write("Params Array: " + URLParser(url).getParams() + '<br>');
document.write("Param: " + URLParser(url).getParam('myparam1') + '<br>');
document.write("Has Param: " + URLParser(url).hasParam('myparam1') + '<br>');

document.write(url + '<br>');

// Remove the first parameter
url = URLParser(url).removeParam('myparam1');
document.write(url + ' - Remove the first parameter<br>');

// Add a third parameter
url = URLParser(url).setParam('myparam3',3);
document.write(url + ' - Add a third parameter<br>');

// Remove the second parameter
url = URLParser(url).removeParam('myparam2');
document.write(url + ' - Remove the second parameter<br>');

// Add a hash
url = URLParser(url).setHash('newhash');
document.write(url + ' - Set Hash<br>');

// Remove the last parameter
url = URLParser(url).removeParam('myparam3');
document.write(url + ' - Remove the last parameter<br>');

// Remove a parameter that doesn't exist
url = URLParser(url).removeParam('myparam3');
document.write(url + ' - Remove a parameter that doesn\"t exist<br>');
46
Bernesto

Gönderen MDN :

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

alert(loadPageVar("name"));
43
orip

Düzenli ifadeler çok kullanırım ama bunun için değil.

Benim uygulamada bir kez sorgu dizesini okumak ve aşağıdaki gibi tüm anahtar/değer çiftlerinden bir nesne oluşturmak benim için daha kolay ve daha verimli görünüyor:

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;
}();

http://domain.com?param1=val1&param2=val2 gibi bir URL için, değerlerini daha sonra kodunuzda search.param1 ve search.param2 olarak alabilirsiniz.

39
Mic

Kod golf:

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]);
}

Göster onu!

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

Mac'imde: test.htm?i=can&has=cheezburger görüntüler

0:can
1:cheezburger
i:can
has:cheezburger
39
shanimal

Roshambo jQuery yöntemi kod çözme URL'sine bakmıyordu

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

İade deyimini eklerken de bu özelliği ekledi

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

Şimdi güncellenmiş Gist'i bulabilirsiniz:

$.urlParam = function(name){
var results = new RegExp('[\\?&]' + name + '=([^&#]*)').exec(window.location.href);
if (!results) { return 0; }
return decodeURIComponent(results[1].replace(/\+/g, " ")) || 0;
}
38
Mohammad Arif
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
38
Jet

bunu beğendim (jquery-howto.blogspot.co.uk sitesinden alınmış):

// 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;
}

Benim için harika çalışıyor.

36
Tomamais

İşte bu mükemmel cevabı - olarak değiştiririm, sorgu dizelerini değer içermeyen anahtarlarla ayrıştırma yeteneği eklenir.

var url = 'http://sb.com/reg/step1?param';
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[1]) p[1] = decodeURIComponent(p[1].replace(/\+/g, " "));
        b[p[0]] = p[1];
    }
    return b;
})((url.split('?'))[1].split('&'));

ÖNEMLİ! Son satırdaki bu işlevin parametresi farklıdır. Bu, kendisine isteğe bağlı bir URL'yi nasıl iletebileceğinin bir örneği. Mevcut URL’yi ayrıştırmak için Bruno’nun cevabındaki son satırı kullanabilirsiniz.

Peki tam olarak ne değişti? URL ile http://sb.com/reg/step1?param= sonuçları aynı olacaktır. Ancak url http://sb.com/reg/step1?param ile Bruno'nun çözümü anahtarsız bir nesne döndürürken, mayın param ve undefined değeri olan bir nesne döndürür.

36
skaurus

Sorgu dizesinden bir nesneye ihtiyacım vardı ve çok fazla koddan nefret ediyorum. Evrendeki en sağlam olmayabilir, ama sadece birkaç satır kod.

var q = {};
location.href.split('?')[1].split('&').forEach(function(i){
    q[i.split('=')[0]]=i.split('=')[1];
});

this.htm?hello=world&foo=bar gibi bir URL oluşturur:

{hello:'world', foo:'bar'}
34
tim

İşte Andy E'nin "Hand-array-style query strings" -version isimli versiyonunun genişletilmiş bir versiyonu. Bir hata düzeltildi (?key=1&key[]=2&key[]=3; 1 kayboldu ve [2,3] ile değiştirildi), birkaç ufak performans iyileştirmesi yaptı (değerlerin yeniden kodu çözüldü, "[" konumunun yeniden hesaplanması, vb. ") Ve bir dizi iyileştirme eklendi (işlevselleştirilmiş, ?key=1&key=2 desteği, ; sınırlayıcıları için destek). Değişkenleri rahatsız edici derecede kısa bıraktım, ancak okunabilir hale getirmek için çok fazla yorum ekledim (oh ve yerel işlevler içinde v işlevini yeniden kullandım, bu kafa karıştırıcıysa üzgünüm;).

Aşağıdaki sorgulayıcıyı idare edecek ...

? Test = Merhaba & kişi = Neek & kişi [] = jeff & kişi [] = jim & kişinin [extra] = john & test3 & nocache = 1398914891264

... şuna benzeyen bir cisme dönüştürmek ...

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

Yukarıda da görebileceğiniz gibi, bu sürüm anahtarın tanımlanabilir ve geçerli olması nedeniyle "hatalı biçimlendirilmiş" dizilerin bir ölçüsünü, yani - person=neek&person[]=jeff&person[]=jim veya person=neek&person=jeff&person=jim işlemlerini gerçekleştirir (en azından dotNet'in NameValueCollection.Add ):

Belirtilen anahtar hedef NameValueCollection örneğinde zaten mevcutsa, belirtilen değer, "değer1, değer2, değer3" biçimindeki virgülle ayrılmış değer listesine eklenir.

Spesifikasyon olmadığı için tekrarlanan tuşlarda jüri biraz dışarıda } görünüyor. Bu durumda, çoklu tuşlar (sahte) bir dizi olarak saklanır. Ancak şunu not alın: _ virgüllere dayalı değerleri dizilere ayırmayınişlemeyin).

Kod:

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;
};
31
Campbeln

Bu bir süre önce oluşturduğum bir fonksiyon ve ben de çok mutluyum. Büyük/küçük harfe duyarlı değildir - kullanışlı olan. Ayrıca, istenen QS mevcut değilse, sadece boş bir dize döndürür.

Bunun sıkıştırılmış bir sürümünü kullanıyorum. Acemiler için neler olup bittiğini daha iyi açıklayabilmek için sıkıştırılmamış gönderiyorum.

Bunun daha hızlı çalışmak için optimize edilebileceği veya farklı şekilde yapılabileceğinden eminim, ancak ihtiyacım olan şey için her zaman harika çalıştı.

Keyfini çıkarın.

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);
}
31
Clint

Az önce arg.js , bu sorunu bir kez ve herkes için çözmeyi amaçlayan bir proje yayınladık. Geleneksel olarak çok zor oldu ama şimdi yapabilirsiniz:

var name = Arg.get("name");

veya bütün partiyi almak:

var params = Arg.all();

ve eğer ?query=true ve #hash=true arasındaki farkı önemsiyorsanız, Arg.query() ve Arg.hash() yöntemlerini kullanabilirsiniz.

27
Mat Ryer

Bu sorunun en üst cevabı ile ilgili sorun, #'den sonra desteklenmeyen parametrelerin olmasıdır, ancak bazen bu değeri almak için de gereklidir.

Tam bir sorgu dizesini de karma işaretli bir ayrıştırmaya izin verecek şekilde cevabı değiştirdim:

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;
};
27
Ph0en1x
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];
        }
    }
}​

Ve URL'yi varsayılan olarak kabul ederek bu işlevi nasıl kullanabilirsiniz?

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

var tech = GetQueryStringParams('stringtext');
var blog = GetQueryStringParams('stringword');
25
gewel
http://someurl.com?key=value&keynovalue&keyemptyvalue=&&keynovalue=nowhasvalue#somehash
  • Düzenli anahtar/değer çifti (?param=value)
  • Değeri olmayan anahtarlar (?param: eşit işaret ya da değer yoktur)
  • Anahtarsız w (boş) (?param=: eşit işaret, ancak eşit işaretin sağına değer yok)
  • Tekrarlanan Anahtarlar (?param=1&param=2)
  • Boş Anahtarları Kaldırır (?&&: anahtar veya değer yok)

Kod:

  • var queryString = window.location.search || '';
    var keyValPairs = [];
    var params      = {};
    queryString     = queryString.substr(1);
    
    if (queryString.length)
    {
       keyValPairs = queryString.split('&');
       for (pairNum in keyValPairs)
       {
          var key = keyValPairs[pairNum].split('=')[0];
          if (!key.length) continue;
          if (typeof params[key] === 'undefined')
             params[key] = [];
          params[key].Push(keyValPairs[pairNum].split('=')[1]);
       }
    }
    

Nasıl aranır:

  • params['key'];  // returns an array of values (1..n)
    

Çıktı:

  • key            ["value"]
    keyemptyvalue  [""]
    keynovalue     [undefined, "nowhasvalue"]
    
20
vol7ron

Browserify kullanıyorsanız, url modülünü Node.js öğesinden kullanabilirsiniz:

var url = require('url');

url.parse('http://example.com/?bob=123', true).query;

// returns { "bob": "123" }

Daha fazla okuma: URL Node.js v0.12.2 El ile ve Belgeler

EDIT: Neredeyse tüm yeni tarayıcılarda oldukça yaygın olarak kullanılan URL arayüzünü kullanabilirsiniz, ve kod eski bir tarayıcıda çalışacaksa, polyfill gibi) kullanabilirsiniz. Bu bir . İşte sorgu parametreleri (aka arama parametreleri) almak için URL arayüzü nasıl kullanılacağına dair bir kod örneği

const url = new URL('http://example.com/?bob=123');
url.searchParams.get('bob'); 

URLSearchParams'ı bunun için de kullanabilirsiniz, işte MDN 'dan bir örnek, URLSearchParams ile yapmak için:

var paramsString = "q=URLUtils.searchParams&topic=api";
var searchParams = new URLSearchParams(paramsString);

//Iterate the search parameters.
for (let p of searchParams) {
  console.log(p);
}

searchParams.has("topic") === true; // true
searchParams.get("topic") === "api"; // true
searchParams.getAll("topic"); // ["api"]
searchParams.get("foo") === null; // true
searchParams.append("topic", "webdev");
searchParams.toString(); // "q=URLUtils.searchParams&topic=api&topic=webdev"
searchParams.set("topic", "More webdev");
searchParams.toString(); // "q=URLUtils.searchParams&topic=More+webdev"
searchParams.delete("topic");
searchParams.toString(); // "q=URLUtils.searchParams"
20
nkh

Ben burada belirtilen teknikleri kullanarak küçük bir kütüphane geliştirdim. Burada bulunabilir:

https://github.com/Nijikokun/query-js

Kullanım

Özel parametre/anahtar getiriliyor:

query.get('param');

Tüm nesneyi almak için oluşturucuyu kullanma:

var storage = query.build();
console.log(storage.param);

ve tonlarca daha fazla ... daha fazla örnek için github linkini kontrol edin.

Özellikler

  1. Hem kod çözme hem de parametrelerde önbellekleme
  2. Karma sorgu dizelerini destekler #hello?page=3
  3. Özel sorguların iletilmesini destekler
  4. Array/Object Parametrelerini destekler user[]="jim"&user[]="bob"
  5. Boş yönetimi destekler &&
  6. name&hello="world" değerleri olmadan bildirim parametrelerini destekler
  7. Tekrarlanan parametreleri destekler param=1&param=2
  8. Temiz, kompakt ve okunabilir kaynak 4kb
  9. AMD, Gerektir, Düğüm desteği
20
Nijikokun

Sorguyu almak için bir liner:

var value = location.search.match(new RegExp(key + "=(.*?)($|\&)", "i"))[1];
20
Anoop

Çok hafif bir jQuery yöntemi:

var qs = window.location.search.replace('?','').split('&'),
    request = {};
$.each(qs, function(i,v) {
    var initial, pair = v.split('=');
    if(initial = request[pair[0]]){
        if(!$.isArray(initial)) {
            request[pair[0]] = [initial]
        }
        request[pair[0]].Push(pair[1]);
    } else {
        request[pair[0]] = pair[1];
    }
    return;
});
console.log(request);

Ve örneğin uyarmak için? Q

alert(request.q)
17
Roi

İşte GitHub'daki sorgu dizesi ayrıştırma kodumun sürümü .

Jquery ile "öneklenir". *, Ancak ayrıştırma işlevinin kendisi jQuery kullanmaz. Oldukça hızlı, ancak birkaç basit performans optimizasyonu için hala açık.

Ayrıca, URL’deki kodlama listesi ve karma tabloları şu şekilde destekler:

arr[]=10&arr[]=20&arr[]=100

veya

hash[key1]=hello&hash[key2]=moto&a=How%20are%20you

jQuery.toQueryParams = function(str, separator) {
    separator = separator || '&'
    var obj = {}
    if (str.length == 0)
        return obj
    var c = str.substr(0,1)
    var s = c=='?' || c=='#'  ? str.substr(1) : str; 

    var a = s.split(separator)
    for (var i=0; i<a.length; i++) {
        var p = a[i].indexOf('=')
        if (p < 0) {
            obj[a[i]] = ''
            continue
        }
        var k = decodeURIComponent(a[i].substr(0,p)),
            v = decodeURIComponent(a[i].substr(p+1))

        var bps = k.indexOf('[')
        if (bps < 0) {
            obj[k] = v
            continue;
        } 

        var bpe = k.substr(bps+1).indexOf(']')
        if (bpe < 0) {
            obj[k] = v
            continue;
        }

        var bpv = k.substr(bps+1, bps+bpe-1)
        var k = k.substr(0,bps)
        if (bpv.length <= 0) {
            if (typeof(obj[k]) != 'object') obj[k] = []
            obj[k].Push(v)
        } else {
            if (typeof(obj[k]) != 'object') obj[k] = {}
            obj[k][bpv] = v
        }
    }
    return obj;

}
16
Vadim

İşte kullanıyorum ne:

/**
 * Examples:
 * getUrlParams()['myparam']    // url defaults to the current page
 * getUrlParams(url)['myparam'] // url can be just a query string
 *
 * Results of calling `getUrlParams(url)['myparam']` with various urls:
 * example.com                               (undefined)
 * example.com?                              (undefined)
 * example.com?myparam                       (empty string)
 * example.com?myparam=                      (empty string)
 * example.com?myparam=0                     (the string '0')
 * example.com?myparam=0&myparam=override    (the string 'override')
 *
 * Origin: http://stackoverflow.com/a/23946023/2407309
 */
function getUrlParams (url) {
    var urlParams = {} // return value
    var queryString = getQueryString()
    if (queryString) {
        var keyValuePairs = queryString.split('&')
        for (var i = 0; i < keyValuePairs.length; i++) {
            var keyValuePair = keyValuePairs[i].split('=')
            var paramName = keyValuePair[0]
            var paramValue = keyValuePair[1] || ''
            urlParams[paramName] = decodeURIComponent(paramValue.replace(/\+/g, ' '))
        }
    }
    return urlParams // functions below
    function getQueryString () {
        var reducedUrl = url || window.location.search
        reducedUrl = reducedUrl.split('#')[0] // Discard fragment identifier.
        var queryString = reducedUrl.split('?')[1]
        if (!queryString) {
            if (reducedUrl.search('=') !== false) { // URL is a query string.
                queryString = reducedUrl
            }
        }
        return queryString
    } // getQueryString
} // getUrlParams

Son durumda '0' yerine 'geçersiz kılmayı' geri döndürmek PHP ile tutarlı olmasını sağlar. IE7'de çalışır.

12
Vladimir Kornea

Bu işlem için Regex yerine split() işlevini kullanmayı tercih ederim:

function getUrlParams() {
    var result = {};
    var params = (window.location.search.split('?')[1] || '').split('&');
    for(var param in params) {
        if (params.hasOwnProperty(param)) {
            var paramParts = params[param].split('=');
            result[paramParts[0]] = decodeURIComponent(paramParts[1] || "");
        }
    }
    return result;
}
11
Eneko Alonso

Kısa bir yöntem isteyenler için (sınırlı):

location.search.split('myParameter=')[1]
10
George

Onay kutusu değerleri (diziler) dahil tüm sorgulayıcı parametreleri al.

GET parametrelerinin doğru ve normal kullanımı göz önüne alındığında, çoğu işlevde eksik olduğunu gördüğüm şeyler, dizilerin desteklenmesi ve karma verilerin kaldırılmasıdır.

Böylece bu işlevi yazdım:

function qs(a){
 if(!a)return {};
 a=a.split('#')[0].split('&');
 var b=a.length,c={},d,k,v;
 while(b--){
  d=a[b].split('=');
  k=d[0].replace('[]',''),v=decodeURIComponent(d[1]||'');
  c[k]?typeof c[k]==='string'?(c[k]=[v,c[k]]):(c[k].unshift(v)):c[k]=v;
 }
 return c
}

Kestirme operatörleri ve süre - döngü kullanarak performansın çok iyi olması gerekir.

Destek:

  1. Boş değerler (key =/key)
  2. Anahtar değeri (key = değer)
  3. Diziler (anahtar [] = değer)
  4. Hash (karma etiketi ayrılmıştır)

Notlar:

Nesne dizilerini desteklemiyor ([key] = değer)

Boşluk + ise + kalır.

Gerekirse .replace(/\+/g, " ") ekleyin.

Kullanım:

qs('array[]=1&array[]=2&key=value&empty=&empty2#hash')

Dönüş:

{
    "empty": "",
    "key": "value",
    "array": [
        "1",
        "2"
    ]
}

Demo:

http://jsfiddle.net/ZQMrt/1/

Bilgi

Bir şey anlamıyorsanız veya fonksiyonu okuyamıyorsanız, sadece sorun. Burada ne yaptığımı açıklamaktan mutluyum.

İşlevin okunamaz olduğunu ve sürdürülemez olduğunu düşünüyorsanız, işlevi sizin için yeniden yazmaktan mutlu olurum, ancak kısa ve bitli operatörlerin her zaman standart bir sözdiziminden daha hızlı olduğunu düşünün (belki ECMA-262'deki kısaltmalar ve bitli operatörler hakkında okuyun). En sevdiğiniz arama motorunu kullanın veya kullanın.) Kodu, standart bir okunabilir sözdiziminde yeniden yazmak, performans kaybı anlamına gelir.

10
cocco

Bu bir iyi çalışıyor

function getQuerystring(key) {
    var query = window.location.search.substring(1);
    var vars = query.split("&");
    for (var i = 0; i < vars.length; i++) {
        var pair = vars[i].split("=");
        if (pair[0] == key) {
            return pair[1];
        }
    }
}

here konumundan alınmış

9
IT ppl
function getUrlVar(key){
    var result = new RegExp(key + "=([^&]*)", "i").exec(window.location.search); 
    return result && unescape(result[1]) || ""; 
}

https://Gist.github.com/1771618

8
alkos333

Bu işlev querystring'i JSON benzeri bir nesneye dönüştürür, aynı zamanda değer içermeyen ve çoklu değer parametrelerini de kullanır:

"use strict";
function getQuerystringData(name) {
    var data = { };
    var parameters = window.location.search.substring(1).split("&");
    for (var i = 0, j = parameters.length; i < j; i++) {
        var parameter = parameters[i].split("=");
        var parameterName = decodeURIComponent(parameter[0]);
        var parameterValue = typeof parameter[1] === "undefined" ? parameter[1] : decodeURIComponent(parameter[1]);
        var dataType = typeof data[parameterName];
        if (dataType === "undefined") {
            data[parameterName] = parameterValue;
        } else if (dataType === "array") {
            data[parameterName].Push(parameterValue);
        } else {
            data[parameterName] = [data[parameterName]];
            data[parameterName].Push(parameterValue);
        }
    }
    return typeof name === "string" ? data[name] : data;
}

Değişken undefined ise decodeURIComponent "undefined" dizesini döndürdüğü için parameter[1] üzerinde undefined denetimi yaparız.

Kullanımı:

"use strict";
var data = getQuerystringData();
var parameterValue = getQuerystringData("parameterName");
6
Albireo

Bunu dene:

String.prototype.getValueByKey = function(k){
    var p = new RegExp('\\b'+k+'\\b','gi');
    return this.search(p) != -1 ? decodeURIComponent(this.substr(this.search(p)+k.length+1).substr(0,this.substr(this.search(p)+k.length+1).search(/(&|;|$)/))) : "";
};

Öyleyse şöyle söyle:

if(location.search != "") location.search.getValueByKey("id");

Bunu cookies için de kullanabilirsiniz:

if(navigator.cookieEnabled) document.cookie.getValueByKey("username");

Bu yalnızca key=value[&|;|$].. olan dizeler için işe yarar, nesneler/dizilerde çalışmaz.

Eğer don't kullanmak istiyorsanız String.prototype ... onu bir işleve taşıyın ve dizgiyi argüman olarak iletin

6
user981090

URL’den geçenleri elde etmek için bu kodu (JavaScript) kullandım:

function getUrlVars() {
            var vars = {};
            var parts = window.location.href.replace(/[?&]+([^=&]+)=([^&]*)/gi, function(m,key,value) {
                vars[key] = value;
            });
            return vars;
        }

Ardından değeri bir değişkene atamak için yalnızca hangi parametreyi almak istediğinizi belirtmeniz gerekir, örneğin, URL example.com/?I=1&p=2&f=3 ise

Bunu değerleri almak için yapabilirsiniz:

var getI = getUrlVars()["I"];
var getP = getUrlVars()["p"];
var getF = getUrlVars()["f"];

o zaman değerler şöyle olurdu:

getI = 1, getP = 2 and getF = 3
6
user2579312

Aşağıdaki kod, iki yöntemi olan bir nesne yaratacaktır:

  1. isKeyExist: Belirli bir parametrenin olup olmadığını kontrol edin
  2. getValue: Belirli bir parametrenin değerini alın.

var QSParam = new function() {
       var qsParm = {};
       var query = window.location.search.substring(1);
       var params = query.split('&');
       for (var i = 0; i < params.length; i++) {
           var pos = params[i].indexOf('=');
           if (pos > 0) {
               var key = params[i].substring(0, pos);
               var val = params[i].substring(pos + 1);
               qsParm[key] = val;
           }
       }
       this.isKeyExist = function(query){
           if(qsParm[query]){
               return true;
           }
           else{
              return false;
           }
       };
       this.getValue = function(query){
           if(qsParm[query])
           {
               return qsParm[query];
           }
           throw "URL does not contain query "+ query;
       }
};
6
Anoop

Aşağıdaki işlev, queryString'inizin nesne versiyonunu döndürür. Parametre içindeki obj.key1 ve obj.key2 değerlerine erişmek için key1 ve key2 yazabilirsiniz.

function getQueryStringObject()
{
    var querystring = document.location.search.replace('?','').split( '&' );
    var objQueryString={};
    var key="",val="";
    if(typeof querystring == 'undefined')
    {
        return (typeof querystring);
    }
    for(i=0;i<querystring.length;i++)
    {
        key=querystring[i].split("=")[0];
        val=querystring[i].split("=")[1];
        objQueryString[key] = val;
    }
    return objQueryString;
}

Ve bu işlevi kullanmak için yazabilirsiniz

var obj= getQueryStringObject();
alert(obj.key1);
5
Imdad

İşte benim bu benim kendi almam. Bu ilk işlev, bir URL dizesini bir ad/değer çifti nesnesine dönüştürür:

url_args_decode = function (url) {
  var args_enc, el, i, nameval, ret;
  ret = {};
  // use the DOM to parse the URL via an 'a' element
  el = document.createElement("a");
  el.href = url;
  // strip off initial ? on search and split
  args_enc = el.search.substring(1).split('&');
  for (i = 0; i < args_enc.length; i++) {
    // convert + into space, split on =, and then decode 
    args_enc[i].replace(/\+/g, ' ');
    nameval = args_enc[i].split('=', 2);
    ret[decodeURIComponent(nameval[0])]=decodeURIComponent(nameval[1]);
  }
  return ret;
};

Ek bir bonus olarak, bazı argümanları değiştirirseniz, bu ikinci işlevi args dizisini tekrar URL dizgisine koymak için kullanabilirsiniz:

url_args_replace = function (url, args) {
  var args_enc, el, name;
  // use the DOM to parse the URL via an 'a' element
  el = document.createElement("a");
  el.href = url;
  args_enc = [];
  // encode args to go into url
  for (name in args) {
    if (args.hasOwnProperty(name)) {
      name = encodeURIComponent(name);
      args[name] = encodeURIComponent(args[name]);
      args_enc.Push(name + '=' + args[name]);
    }
  }
  if (args_enc.length > 0) {
    el.search = '?' + args_enc.join('&');
  } else {
    el.search = '';
  }
  return el.href;
};
5
BMitch

Burada ihtiyaçlarım için küçük bir URL kütüphanesi yaptım: https://github.com/Mikhus/jsurl

URL’leri JavaScript’te işlemek için daha yaygın bir yöntemdir. Bu arada çok hafiftir (küçültülmüş ve <1 KB sıkıştırılmış) ve çok basit ve temiz bir API'ye sahiptir. Ve çalışmak için başka bir kütüphaneye ihtiyacı yok.

İlk soruya gelince, yapmak çok basit:

var u = new Url; // Current document URL
// or
var u = new Url('http://user:[email protected]:8080/some/path?foo=bar&bar=baz#anchor');

// Looking for query string parameters
alert( u.query.bar);
alert( u.query.foo);

// Modifying query string parameters
u.query.foo = 'bla';
u.query.woo = ['hi', 'hey']

alert(u.query.foo);
alert(u.query.woo);
alert(u);
5
Mikhus

Dizi tarzı parametreler istiyorsanız URL.js / dizge dizinlerini (eşlemelerin yanı sıra) keyfi olarak iç içe dizili parametreleri de destekler. Ayrıca, URL kod çözme işlemini gerçekleştirir.

url.get("val[0]=zero&val[1]=one&val[2]&val[3]=&val[4]=four&val[5][0]=n1&val[5][1]=n2&val[5][2]=n3&key=val", {array:true});
// Result
{
    val: [
        'zero',
        'one',
        true,
        '',
        'four',
        [ 'n1', 'n2', 'n3' ]
    ]
    key: 'val'
}
4
Kevin Cox

URI sorgu değerlerini almak için pek çok çözüm var, bunu tercih ediyorum çünkü kısa ve harika çalışıyor:

function get(name){
   if(name=(new RegExp('[?&]'+encodeURIComponent(name)+'=([^&]*)')).exec(location.search))
      return decodeURIComponent(name[1]);
}
4
BlueMark

Basit JavaScript ve normal ifadelerle basit bir çözüm :

alert(getQueryString("p2"));

function getQueryString (Param) {
    return decodeURI("http://www.example.com/?p1=p11&p2=p2222".replace(new RegExp("^(?:.*[&?]" + encodeURI(Param).replace(/[.+*]/g, "$&") + "(?:=([^&]*))?)?.*$", "i"), "$1"));
}

JsFiddle

4
Saidulu Buchhala

Bazı serin şekerleme ile bunun için bir güzel küçük url yardımcı programı var:

http://www.example.com/path/index.html?silly=willy#chucky=cheese

url();            // http://www.example.com/path/index.html?silly=willy#chucky=cheese
url('domain');    // example.com
url('1');         // path
url('-1');        // index.html
url('?');         // silly=willy
url('?silly');    // willy
url('?poo');      // (an empty string)
url('#');         // chucky=cheese
url('#chucky');   // cheese
url('#poo');      // (an empty string)

Daha fazla örnek göz atın ve buradan indirebilirsiniz: https://github.com/websanova/js-url#url

4
Rob

Bu, int ans almak için en basit ve küçük işlevli JavaScript'tir. URL'den dize parametresi değeri

/* THIS FUNCTION IS TO FETCH INT PARAMETER VALUES */

function getParameterint(param) {
            var val = document.URL;
            var url = val.substr(val.indexOf(param))  
            var n=parseInt(url.replace(param+"=",""));
            alert(n); 
}
getParameteraint("page");
getParameteraint("pagee");

/*THIS FUNCTION IS TO FETCH STRING PARAMETER*/
function getParameterstr(param) {
            var val = document.URL;
            var url = val.substr(val.indexOf(param))  
            var n=url.replace(param+"=","");
            alert(n); 
}
getParameterstr("str");

Kaynak ve DEMO: http://bloggerplugnplay.blogspot.in/2012/08/how-to-get-url-parameter-in-javascript.html

4
Code Spy

Node.js'in kaynağında sağlam bir uygulama var kaynak
https://github.com/joyent/node/blob/master/lib/querystring.js

Ayrıca TJ'nin qs ayrıştırma params ayrıştırma yapar
https://github.com/visionmedia/node-querystring

4
clyfe

Eğer Underscore.js veya lodash 'a sahipseniz, bunu yapmanın hızlı ve kirli bir yolu şudur:

_.object(window.location.search.slice(1).split('&').map(function (val) { return val.split('='); }));
4
acjay
var getUrlParameters = function (name, url) {
    if (!name) {
        return undefined;
    }

    name = name.replace(/[\[]/, '\\[').replace(/[\]]/, '\\]');
    url = url || location.search;

    var regex = new RegExp('[\\?&#]' + name + '=?([^&#]*)', 'gi'), result, resultList = [];

    while (result = regex.exec(url)) {
        resultList.Push(decodeURIComponent(result[1].replace(/\+/g, ' ')));
    }

    return resultList.length ? resultList.length === 1 ? resultList[0] : resultList : undefined;
};
4
kayz1

bu cevabı aldım ve isteğe bağlı olarak URL'yi parametre olarak iletmek için destek ekledim; window.location.search dosyasına geri döner. Açıkçası, bu sorgu dizesi parametrelerini geçerli sayfa olmayan URL'lerden almak için kullanışlıdır:

(function($, undef) {
  $.QueryString = function(url) {
    var pairs, qs = null, index, map = {};
    if(url == undef){
      qs = window.location.search.substr(1);
    }else{
      index = url.indexOf('?');
      if(index == -1) return {};
      qs = url.substring(index+1);
    }
    pairs = qs.split('&');
    if (pairs == "") return {};
    for (var i = 0; i < pairs.length; ++i)
    {
      var p = pairs[i].split('=');
      if(p.length != 2) continue;
      map[p[0]] = decodeURIComponent(p[1].replace(/\+/g, " "));
    }
    return map;
  };
})(jQuery);
4
mynameistechno

Bunun bunu başarmanın doğru ve özlü bir yolu olduğuna inanıyorum ( http://css-tricks.com/snippets/javascript/get-url-variables/ adresinden değiştirilmiş):

function getQueryVariable(variable) {

    var query = window.location.search.substring(1),            // Remove the ? from the query string.
        vars = query.split("&");                                // Split all values by ampersand.

    for (var i = 0; i < vars.length; i++) {                     // Loop through them...
        var pair = vars[i].split("=");                          // Split the name from the value.
        if (pair[0] == variable) {                              // Once the requested value is found...
            return ( pair[1] == undefined ) ? null : pair[1];   // Return null if there is no value (no equals sign), otherwise return the value.
        }
    }

    return undefined;                                           // Wasn't found.

}
4

Bu parametre değerini (sorgu dizesi) almak için çok basit bir yöntemdir

Değerini almak için gV(para_name) işlevini kullanın.

var a=window.location.search;
a=a.replace(a.charAt(0),""); //Removes '?'
a=a.split("&");

function gV(x){
 for(i=0;i<a.length;i++){
  var b=a[i].substr(0,a[i].indexOf("="));
  if(x==b){
   return a[i].substr(a[i].indexOf("=")+1,a[i].length)}
3
Ankit_Shah55

Bir JavaScript kitaplığı kullanmak istemiyorsanız, window.location dosyasını ayrıştırmak için JavaScript string işlevlerini kullanabilirsiniz. Bu kodu harici bir .js dosyasında tutun; farklı projelerde tekrar tekrar kullanabilirsiniz.

// Example - window.location = "index.htm?name=bob";

var value = getParameterValue("name");

alert("name = " + value);

function getParameterValue(param)
{
    var url = window.location;
    var parts = url.split('?');
    var params = parts[1].split('&');
    var val = "";

    for ( var i=0; i<params.length; i++)
    {
        var paramNameVal = params[i].split('=');

        if ( paramNameVal[0] == param )
        {
            val = paramNameVal[1];
        }
    }
    return val;
}
3
Robert Bolton

En güzel ama basit:

data = {};
$.each(
    location.search.substr(1).split('&').filter(Boolean).map(function(kvpairs){
        return kvpairs.split('=')
    }),
    function(i,values) {
        data[values.shift()] = values.join('=')
    }
);

?a[]=1&a[]2 gibi değer listelerini işlemez

3
Damien

Dar Dersleri iyi bir eklenti olarak öneririm. Uzun zamandır onunla çalıştım. Aşağıdaki kodu da kullanabilirsiniz. Jus, var queryObj = {}; dosyasını document.ready dizininden önce koyun ve feryat kodunu document.ready dizininin başına koyun. Bu koddan sonra sahip olduğunuz herhangi bir sorgu nesnesi için queryObj["queryObjectName"] kullanabilirsiniz.

var querystring = location.search.replace('?', '').split('&');
for (var i = 0; i < querystring.length; i++) {
    var name = querystring[i].split('=')[0];
    var value = querystring[i].split('=')[1];
    queryObj[name] = value;
}
2
farnoush resa

Bir sorgu nesnesini elde etmek için boyut açısından en kısa ifade:

var params = {};
location.search.substr(1).replace(/([^&=]*)=([^&]*)&?/g,
  function () { params[decodeURIComponent(arguments[1])] = decodeURIComponent(arguments[2]); });

Bir dizgeden bir URI'yi Aname __-benzeri bileşenlerine ayrıştırmak için locationöğesini kullanabilirsiniz (örneğin #...'dan kurtulmak için):

var a = document.createElement('a');
a.href = url;
// Parse a.search.substr(1)... as above
2
daluege

Kullanın:

  $(document).ready(function () {
      var urlParams = {};
      (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);

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

Lütfen kontrol ve yorumlarınızı bana bildirin. Ayrıca bakınız:jQuerykullanılarak sorgulayıcı değer nasıl elde edilir.

2
Pushkraj

Bu,VEdizilerini değişkenleri bir URL dizgisinden ayrıştırır. Ne regex veya herhangi bir harici kütüphaneyi kullanmaz.

function url2json(url) {
   var obj={};
   function arr_vals(arr){
      if (arr.indexOf(',') > 1){
         var vals = arr.slice(1, -1).split(',');
         var arr = [];
         for (var i = 0; i < vals.length; i++)
            arr[i]=vals[i];
         return arr;
      }
      else
         return arr.slice(1, -1);
   }
   function eval_var(avar){
      if (!avar[1])
          obj[avar[0]] = '';
      else
      if (avar[1].indexOf('[') == 0)
         obj[avar[0]] = arr_vals(avar[1]);
      else
         obj[avar[0]] = avar[1];
   }
   if (url.indexOf('?') > -1){
      var params = url.split('?')[1];
      if(params.indexOf('&') > 2){
         var vars = params.split('&');
         for (var i in vars)
            eval_var(vars[i].split('='));
      }
      else
         eval_var(params.split('='));
   }
   return obj;
}

Örnek:

var url = "http://www.x.com?luckyNums=[31,21,6]&name=John&favFoods=[pizza]&noVal"
console.log(url2json(url));

Çıktı:

[object]
   noVal: ""
   favFoods: "pizza"
   name:     "John"
   luckyNums:
      0: "31"
      1: "21"
      2: "6"
2
Pithikos

Bu işlev, gerektiğinde özyinelemeyi kullanarak rasgele iç içe geçmiş değerlerle ayrıştırılmış bir JavaScript nesnesini döndürür.

İşte bir jsfiddle example.

[
  '?a=a',
  '&b=a',
  '&b=b',
  '&c[]=a',
  '&c[]=b',
  '&d[a]=a',
  '&d[a]=x',
  '&e[a][]=a',
  '&e[a][]=b',
  '&f[a][b]=a',
  '&f[a][b]=x',
  '&g[a][b][]=a',
  '&g[a][b][]=b',
  '&h=%2B+%25',
  '&i[aa=b',
  '&i[]=b',
  '&j=',
  '&k',
  '&=l',
  '&abc=foo',
  '&def=%5Basf%5D',
  '&ghi=[j%3Dkl]',
  '&xy%3Dz=5',
  '&foo=b%3Dar',
  '&xy%5Bz=5'
].join('');

Yukarıdaki test örneklerinden herhangi biri verildiğinde.

var qs = function(a) {
  var b, c, e;
  b = {};
  c = function(d) {
    return d && decodeURIComponent(d.replace(/\+/g, " "));
  };
  e = function(f, g, h) {
    var i, j, k, l;
    h = h ? h : null;
    i = /(.+?)\[(.+?)?\](.+)?/g.exec(g);
    if (i) {
      [j, k, l] = [i[1], i[2], i[3]]
      if (k === void 0) {
        if (f[j] === void 0) {
          f[j] = [];
        }
        f[j].Push(h);
      } else {
        if (typeof f[j] !== "object") {
          f[j] = {};
        }
        if (l) {
          e(f[j], k + l, h);
        } else {
          e(f[j], k, h);
        }
      }
    } else {
      if (f.hasOwnProperty(g)) {
        if (Array.isArray(f[g])) {
          f[g].Push(h);
        } else {
          f[g] = [].concat.apply([f[g]], [h]);
        }
      } else {
        f[g] = h;
      }
      return f[g];
    }
  };
  a.replace(/^(\?|#)/, "").replace(/([^#&=?]+)?=?([^&=]+)?/g, function(m, n, o) {
    n && e(b, c(n), c(o));
  });
  return b;
};
1
Peter T Bosse II

Bu işe yarayacak ... Parametreyi ismini girerek bulmanız gereken yerde bu işlevi çağırmanız gerekir ...

function getParameterByName(name)
{
  name = name.replace(/[\[]/,"\\\[").replace(/[\]]/,"\\\]");
  var regexS = "[\\?&]"+name+"=([^&#]*)";
  var regex = new RegExp( regexS );
  var results = regex.exec( window.location.href );
  alert(results[1]);
  if (results == null)
    return "";
  else
    return results[1];
}
1
sonorita

Hızlı, kolay ve hızlı:

İşlev:

function getUrlVar() {
    var result = {};
    var location = window.location.href.split('#');
    var parts = location[0].replace(/[?&]+([^=&]+)=([^&]*)/gi, function(m,key,value) {
        result [key] = value;
    });
    return result;
}

Kullanım:

var varRequest = getUrlVar()["theUrlVarName"];
1
Shlomi Hassid

İşte String prototip uygulaması:

String.prototype.getParam = function( str ){
    str = str.replace(/[\[]/,"\\\[").replace(/[\]]/,"\\\]");
    var regex = new RegExp( "[\\?&]*"+str+"=([^&#]*)" );    
    var results = regex.exec( this );
    if( results == null ){
        return "";
    } else {
        return results[1];
    }
}

Örnek çağrı:

var status = str.getParam("status")

str bir sorgu dizesi veya url olabilir

1
krisrak

Şuna bakın post veya bunu kullanın:

<script type="text/javascript" language="javascript">
    $(document).ready(function()
    {
        var urlParams = {};
        (function ()
        {
            var match,
            pl= /\+/g,  // Regular expression for replacing addition symbol with a space
            search = /([^&=]+)=?([^&]*)/g,
            decode = function (s) { return decodeURIComponent(s.replace(pl, " ")); },
            query  = window.location.search.substring(1);

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

        if (urlParams["q1"] === 1)
        {
            return 1;
        }
    });
</script>
1
soheil bijavar

Bunu güvenilir bir şekilde yapmak, ilk başta düşünülenden daha fazladır.

  1. Diğer cevaplarda kullanılan location.search, kırılgandır ve bundan kaçınılmalıdır - örneğin, birisi vidalanırsa ve #fragment dizesinden önce bir ?query tanımlayıcısı koyarsa boş döner.
  2. Bence, URL'lerin tarayıcıda otomatik olarak kaçmasının bir yolu vardır, bu da bence decodeURIComponent 'ı zorunlu kılmaktadır.
  3. Birçok sorgu dizgisi kullanıcı girdisinden üretilir, bu da URL içeriği hakkındaki varsayımların çok kötü olduğu anlamına gelir. Bunun gibi çok temel şeyleri içermek her bir anahtarın benzersiz veya hatta bir değeri vardır.

Bunu çözmek için, burada sağlıklı bir dozda defansif programlama ile yapılandırılabilir bir API var. Değişkenlerin bazılarını zorlamak istemeniz durumunda ya da girdi asla hasOwnProperty, vb. İçeremezse, boyutun yarısı yapılabilir.

Sürüm 1: Her parametre için ad ve değer içeren bir veri nesnesi döndürür. Onları etkili bir şekilde çoğaltır ve her zaman soldan sağa bulunan ilkine saygı duyar.

function getQueryData(url, paramKey, pairKey, missingValue, decode) {

    var query, queryStart, fragStart, pairKeyStart, i, len, name, value, result;

    if (!url || typeof url !== 'string') {
        url = location.href; // more robust than location.search, which is flaky
    }
    if (!paramKey || typeof paramKey !== 'string') {
        paramKey = '&';
    }
    if (!pairKey || typeof pairKey !== 'string') {
        pairKey = '=';
    }
    // when you do not explicitly tell the API...
    if (arguments.length < 5) {
        // it will unescape parameter keys and values by default...
        decode = true;
    }

    queryStart = url.indexOf('?');
    if (queryStart >= 0) {
        // grab everything after the very first ? question mark...
        query = url.substring(queryStart + 1);
    } else {
        // assume the input is already parameter data...
        query = url;
    }
    // remove fragment identifiers...
    fragStart = query.indexOf('#');
    if (fragStart >= 0) {
        // remove everything after the first # hash mark...
        query = query.substring(0, fragStart);
    }
    // make sure at this point we have enough material to do something useful...
    if (query.indexOf(paramKey) >= 0 || query.indexOf(pairKey) >= 0) {
        // we no longer need the whole query, so get the parameters...
        query = query.split(paramKey);
        result = {};
        // loop through the parameters...
        for (i = 0, len = query.length; i < len; i = i + 1) {
            pairKeyStart = query[i].indexOf(pairKey);
            if (pairKeyStart >= 0) {
                name = query[i].substring(0, pairKeyStart);
            } else {
                name = query[i];
            }
            // only continue for non-empty names that we have not seen before...
            if (name && !Object.prototype.hasOwnProperty.call(result, name)) {
                if (decode) {
                    // unescape characters with special meaning like ? and #
                    name = decodeURIComponent(name);
                }
                if (pairKeyStart >= 0) {
                    value = query[i].substring(pairKeyStart + 1);
                    if (value) {
                        if (decode) {
                            value = decodeURIComponent(value);
                        }
                    } else {
                        value = missingValue;
                    }
                } else {
                    value = missingValue;
                }
                result[name] = value;
            }
        }
        return result;
    }
}

Sürüm 2: Her iki parametre için bir dizin bulunan, aynı uzunluktaki iki diziye sahip, biri isim, diğeri değerler için bir veri haritası nesnesi döndürür. Bu, yinelenen adları destekliyor ve bilerek onları yinelemiyor, çünkü muhtemelen bu formatı kullanmak isteyeceksiniz.

function getQueryData(url, paramKey, pairKey, missingValue, decode) {

   var query, queryStart, fragStart, pairKeyStart, i, len, name, value, result;

   if (!url || typeof url !== 'string') {
       url = location.href; // more robust than location.search, which is flaky
   }
   if (!paramKey || typeof paramKey !== 'string') {
       paramKey = '&';
   }
   if (!pairKey || typeof pairKey !== 'string') {
       pairKey = '=';
   }
   // when you do not explicitly tell the API...
   if (arguments.length < 5) {
       // it will unescape parameter keys and values by default...
       decode = true;
   }

   queryStart = url.indexOf('?');
   if (queryStart >= 0) {
       // grab everything after the very first ? question mark...
       query = url.substring(queryStart + 1);
   } else {
       // assume the input is already parameter data...
       query = url;
   }
   // remove fragment identifiers...
   fragStart = query.indexOf('#');
   if (fragStart >= 0) {
       // remove everything after the first # hash mark...
       query = query.substring(0, fragStart);
   }
   // make sure at this point we have enough material to do something useful...
   if (query.indexOf(paramKey) >= 0 || query.indexOf(pairKey) >= 0) {
       // we no longer need the whole query, so get the parameters...
       query = query.split(paramKey);
       result = {
           names: [],
           values: []
       };
       // loop through the parameters...
       for (i = 0, len = query.length; i < len; i = i + 1) {
           pairKeyStart = query[i].indexOf(pairKey);
           if (pairKeyStart >= 0) {
               name = query[i].substring(0, pairKeyStart);
           } else {
               name = query[i];
           }
           // only continue for non-empty names...
           if (name) {
               if (decode) {
                   // unescape characters with special meaning like ? and #
                   name = decodeURIComponent(name);
               }
               if (pairKeyStart >= 0) {
                   value = query[i].substring(pairKeyStart + 1);
                   if (value) {
                       if (decode) {
                           value = decodeURIComponent(value);
                       }
                   } else {
                       value = missingValue;
                   }
               } else {
                   value = missingValue;
               }
               result.names.Push(name);
               result.values.Push(value);
           }
       }
       return result;
   }

}

1
Seth Holladay

Bu benim için işe yaramadı, b parametresi mevcut olduğu için ?b ile eşleşmek istiyorum ve r parametresi olarak ?return ile eşleşmek istemiyorum, işte my solution .

window.query_param = function(name) {
  var param_value, params;

  params = location.search.replace(/^\?/, '');
  params = _.map(params.split('&'), function(s) {
    return s.split('=');
  });

  param_value = _.select(params, function(s) {
    return s.first === name;
  })[0];

  if (param_value) {
    return decodeURIComponent(param_value[1] || '');
  } else {
    return null;
  }
};
1
Dorian
// Parse query string
var params = {}, queryString = location.hash.substring(1),
    regex = /([^&=]+)=([^&]*)/g,
    m;
while (m = regex.exec(queryString)) {
    params[decodeURIComponent(m[1])] = decodeURIComponent(m[2]);
}
0