Sorgu dizesi değerlerini jQuery (veya onsuz) aracılığıyla almanın eklentisiz bir yolu var mı ?

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

Güncelleme: Eylül-2018

Basit ve düzgün (ancak tam değil) tarayıcı desteğine sahip URLSearchParams'ı kullanabilirsiniz .

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

orijinal

Bu amaçla jQuery'ye ihtiyacınız yok. Sadece 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 varsa ( ?foo=lorem&foo=ipsum), ilk değeri ( lorem) alırsınız . Bununla ilgili bir standart yoktur ve kullanımları farklılık gösterir, örneğin şu soruya bakın: Yinelenen HTTP GET sorgu anahtarlarının yetkili konumu .
NOT: İşlev büyük / küçük harfe duyarlıdır. Büyük / küçük harfe duyarlı olmayan parametre adını tercih ediyorsanız, RegExp'e 'i' değiştirici ekleyin

Bu, aynı sonucu daha kısa sürede elde etmek için yeni URLSearchParams spesifikasyonlarına dayanan bir güncellemedir . Aşağıdaki " URLSearchParams " başlıklı cevaba bakın.

Burada yayınlanan çözümlerin bazıları verimsizdir. Komut dosyasının bir parametreye erişmesi gerektiğinde normal ifade aramasını tekrarlamak tamamen gereksizdir, parametreleri ilişkilendirilebilir dizi stili bir nesneye bölmek için tek bir işlev yeterlidir. HTML 5 Geçmişi API'sı ile çalışmıyorsanız, bu sayfa yükleme başına yalnızca bir kez gereklidir. Buradaki diğer öneriler de URL'nin kodunu 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 sorgu dizesi:

?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 dizelerini işlemek için de kolayca geliştirilebilir. Bunun bir örneği burada , ancak dizi stili parametreleri RFC 3986'da tanımlanmadığından, bu yanıtı kaynak koduyla kirletmeyeceğim. "Kirli" bir versiyonla ilgilenenler için, aşağıdaki kamp kemerinin cevabına bakınız .

Ayrıca, yorumlarda belirtildiği gibi, çiftler ;için yasal bir sınırlayıcıdır key=value. İşlenmesi daha karmaşık bir regex gerektiriyordu , ;ya &da gereksiz olduğunu düşünüyorum çünkü ;kullanılan nadirdir ve her ikisinin de kullanılması daha olası değildir. ;Bunun yerine desteklemeniz gerekiyorsa &, bunları normal ifadeyle değiştirin.

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

Çok daha basit!

GÜNCELLENMİŞ

Yeni bir özellik, aşağıdaki gibi tekrarlanan parametreleri almak olacaktır myparam=1&myparam=2. Bir şartname yoktur , ancak mevcut yaklaşımların çoğu bir dizinin oluşturulmasını takip eder.

myparam = ["1", "2"]

Yani, bunu yönetme yaklaşımı:

let urlParams = {};
(window.onpopstate = function () {
    let 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)) {
        if (decode(match[1]) in urlParams) {
            if (!Array.isArray(urlParams[decode(match[1])])) {
                urlParams[decode(match[1])] = [urlParams[decode(match[1])]];
            }
            urlParams[decode(match[1])].push(decode(match[2]));
        } else {
            urlParams[decode(match[1])] = decode(match[2]);
        }
    }
})();

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

Gibi bir URL ile ?topic=123&name=query+string, 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ırtarak 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
}

Şaşkın, ama anlaşılabilir. Bazı değişkenler tanımlanmadığından çalışmaz.

Url'deki ?ve aynı zamanda karma olan parametreleri aramaya başlarlar #. Daha sonra eşittir işaretinde her parametre için b[f][p]("=")( indexOfanahtar / değer almak için karakterin konumunu kullanırlar). Ayrıldıktan sonra parametrenin bir değeri olup olmadığını kontrol ederler, eğer varsa değeri saklarlar d, aksi takdirde devam ederler.

Sonunda nesne ddöndürülür, kaçış ve +işaret işlenir . Bu nesne benimki gibi, aynı davranışa sahip.

Bir jQuery eklentisi olarak yöntemim

(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 karşı bölünmüş yöntem) ( jsPerf )

Hazırlık kodu: yöntem bildirimi

Bölünmüş test kodu

var qs = window.GetQueryString(query);

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

Normal ifade test kodu

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

Windows Server 2008 R2 / 7 x64 üzerinde Firefox 4.0 x86'da test etme

• Bölme yöntemi : 144.780 ± 2.17% en hızlı
• Regex yöntemi :% 13,891 ± 0,85 | % 90 daha yavaş

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 bkz. Http://james.padolsey.com/javascript/bujs-1-getparameterbyname/

URLSearchParams

Firefox 44+, Opera 36+, Edge 17+, Safari 10.3+ ve Chrome 49+, URLSearchParams API'sını destekler :

• Chrome Duyurusu ve ayrıntılar
• Opera Duyurusu ve Ayrıntılar
• Firefox Duyurusu ve ayrıntılar

IE'nin kararlı sürümleri için google tarafından önerilen bir URLSearchParams çoklu dolgusu vardır .

W3C tarafından standartlaştırılmamıştır , ancak WhatWG tarafından yaşayan bir standarttır .

Şunlar üzerinde kullanabilirsiniz location:

let params = new URLSearchParams(location.search);

veya

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

Veya elbette herhangi bir URL'de:

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

.searchParamsURL nesnesinde, aşağıdaki gibi bir steno özelliği kullanarak parametreler alabilirsiniz :

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

Okumak / set parametreleri aracılığıyla get(KEY), set(KEY, VALUE), append(KEY, VALUE)API. Ayrıca tüm değerler üzerinde yineleme yapabilirsiniz for (let p of params) {}.

Denetim ve test için bir referans uygulama ve bir örnek sayfa mevcuttur.

Başka bir öneri. Purl eklentisi , çapa, ana bilgisayar vb.Dahil olmak üzere URL'nin tüm bölümlerini almayı sağlar.

JQuery ile veya jQuery olmadan kullanılabilir.

Kullanımı çok basit ve serin:

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'

Bununla birlikte, 11 Kasım 2014'ten itibaren Purl artık korunmamaktadır ve yazar bunun yerine URI.js kullanılmasını önermektedir . JQuery eklentisi, elemanlara odaklandığı için farklıdır - dizelerle kullanım için, sadece URIdoğrudan, jQuery ile veya jQuery olmadan kullanın . Benzer kod böyle, dolgun dokümanlar olarak görünecektir 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'

tl; Dr.

Çok değerli anahtarları ve kodlanmış karakterleri işleyen hızlı, eksiksiz bir çözüm .

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

Tüm bu kod nedir ...
"null birleştirme" , kısa devre değerlendirmesi
ES6 Yıkım atamaları , Ok fonksiyonları , Ş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"

Vanilla JavaScript çözümü hakkında daha fazla bilgi ...

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

En kolay (kukla) çözüm

var queryDict = {};
location.search.substr(1).split("&").forEach(function(item) {queryDict[item.split("=")[0]] = item.split("=")[1]})

• Kolları anahtarlarını boşaltmak doğru.
• Bulunan son değere sahip çoklu anahtarları geçersiz kılar .

"?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 tuş 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 bunun yerine diziler döndürür .
• Değerlere qd.key[index]veya ile erişinqd[key][index]

> qd
a: ["1", "5"]
b: ["0"]
c: ["3"]
d: [undefined]
e: [undefined]

Kodlanmış karakterler?

decodeURIComponent()İkinci veya her iki yarma için 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

* !!! Bunun decodeURIComponent(undefined)dize döndürdüğünü lütfen unutmayın "undefined". Çözüm , tanımsız değerlerde çağrılmamasını &&sağlayan basit bir kullanımında yatmaktadır decodeURIComponent(). (Üstteki "tam çözüme" bakın.)

v = v && decodeURIComponent(v);

Querystring boşsa ( location.search == ""), sonuç biraz yanıltıcıdır qd == {"": undefined}. Likeso ayrıştırma işlevini başlatmadan önce sorgu dizesini kontrol etmeniz önerilir:

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

Snipplr.com üzerinde Roshambo jQuery ile URL Parametreleri Get | Geliştirildi . Onun komut dosyası ile kolayca sadece istediğiniz parametreleri çıkarmak için olsun.

İşte öz:

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

Ardından, parametrelerinizi sorgu dizesinden alın.

URL / sorgu dizesi öyleyse xyz.com/index.html?lang=de.

Sadece arayın var langval = $.urlParam('lang');, anladınız.

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

JQuery kullanıyorsanız, jQuery BBQ: Back Button & Query Library gibi bir kütüphane kullanabilirsiniz .

... jQuery Barbekü .deparam()hem karma devlet yönetimi ve parça / sorgu dizesi ayrıştırma ve birleştirme yardımcı yöntemleri ile birlikte, tam bir yöntem sağlar .

Düzenle: Deparam Ekleme Örneği:

 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, aşağıdakileri kullanabilirsiniz ...

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'sı ve özellikle history.pushState()ve nedeniyle history.replaceState(), URL, parametrelerin ve değerlerinin önbelleğini geçersiz kılacak şekilde değişebilir.

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

Sadece iki bölme kullanın :

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

Önceki ve daha eksiksiz cevapların hepsini okuyordum. Ama bence bu en basit ve hızlı yöntem. Bu jsPerf karşılaştırmasını kontrol edebilirsiniz

Rup'in yorumunda problemi çözmek için, ilk satırı aşağıdaki ikiye değiştirerek koşullu bir bölünme ekleyin. Ancak mutlak doğruluk, artık normal ifadeden 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;
}

Rup'in karşı davasına girmeyeceğinizi biliyorsanız, bu kazanır. Aksi takdirde normal ifade.

Veya sorgu dizesinin kontrolüne sahipseniz ve almaya çalıştığınız bir değerin hiçbir zaman URL kodlamalı karakterler içermeyeceğini garanti ediyorsanız (bunların bir değere sahip olması kötü bir fikir olacaktır) - aşağıdaki biraz daha basitleştirilmiş ve okunabilir sürümü kullanabilirsiniz 1. seçeneğin:

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

İşte Andy E'nin tam teşekküllü bir jQuery eklentisine mükemmel çözümü yapma konusundaki bıçağı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!

Sorgu dizesini ayrıştırmaktan daha fazla URL manipülasyonu yapıyorsanız, URI.js'yi yararlı bulabilirsiniz . URL'leri işlemek için bir kütüphanedir ve tüm çan ve ıslıklarla birlikte gelir. (Burada kendi reklamını yaptığım için üzgünüm)

querystring'inizi bir 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 aynı zamanda "düzeltmeleri" kötü querystrings gibi ?&foo&&bar=baz&etmek ?foo&bar=baz)

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

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

Öyleyse neden kullanmıyorsunuz? 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 aşağı yukarı. Blogumda bu işlev hakkında daha fazla bilgi .

PHP $ _GET dizisine benzer bir nesneyi almanın 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();

Sorgu dizesi için x=5&y&z=hello&x=6bu nesne döndürür:

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

Basit JavaScript koduyla 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 kodunun herhangi bir yerinden arayın:

var result = qs('someKey');

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

URL parametrelerinin diseksiyonu ve manipülasyonunu 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

Misal:

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

Gönderen MDN'yi :

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

alert(loadPageVar("name"));

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!

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

Mac bilgisayarımda: test.htm?i=can&has=cheezburgerekranlar

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

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

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=val2Sizin gibi bir URL için değerlerini daha sonra kodunuzda search.param1ve olarak alabilirsiniz search.param2.

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

Roshambo jQuery yöntemi kod çözme URL'siyle ilgilenmiyordu

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

Dönüş özelliğini eklerken bu özelliği de ekledim

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

Şimdi güncellenmiş özeti bulabilirsiniz:

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

Sevdiğim bu bir (jquery-howto.blogspot.co.uk alınmıştır):

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

İşte bu mükemmel cevaba yapılan düzenlemem - sorgu dizelerini değersiz anahtarlarla ayrıştırma özelliği eklendi.

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 sadece rastgele bir URL'yi nasıl geçirebileceğinin bir örneğidir. Geçerli URL'yi ayrıştırmak için Bruno'nun cevabındaki son satırı kullanabilirsiniz.

Peki tam olarak ne değişti? Url http://sb.com/reg/step1?param=sonuçları aynı olacaktır. Ancak url http://sb.com/reg/step1?paramBruno'nun çözümü anahtarsız bir nesneyi döndürürken, benimki anahtar paramve undefineddeğer içeren bir nesneyi döndürür .

Sorgu dizesinden bir nesneye ihtiyacım vardı ve çok 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];
});

Benzeri bir URL this.htm?hello=world&foo=baroluşturur:

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

İşte Andy E'nin bağlantılı "Dizi tarzı sorgu dizelerini ele" sürümünün genişletilmiş bir sürümü. Bir hata düzeltildi ( ?key=1&key[]=2&key[]=3; 1kaybederek değiştirilir [2,3]), (işlevselleştirüerek için destek ve iyileştirmeler eklenen bir numarayı ( "[" pozisyonunu vs. yeniden hesaplanması, değerlerin yeniden deşifre) birkaç küçük performans iyileştirmeleri yapılmış ?key=1&key=2için, destek ;sınırlayıcı) . Değişkenleri can sıkıcı bir şekilde kısa bıraktım, ancak okunabilir hale getirmek için yorumlar bolca ekledim (oh, ve vyerel işlevler içinde yeniden kullandım , bu kafa karıştırıcı ise özür dilerim;).

Aşağıdaki sorgu dizesi işleyecek ...

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

... ona benzeyen bir nesneye dönüştürmek ...

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

Yukarıda görebileceğiniz gibi, bu sürüm "hatalı biçimlendirilmiş" dizilerin bir ölçüsünü işler, yani - person=neek&person[]=jeff&person[]=jimveya person=neek&person=jeff&person=jimanahtar tanımlanabilir ve geçerli olduğundan (en azından dotNet'in NameValueCollection.Add öğesinde ):

Belirtilen anahtar zaten hedef NameValueCollection örneğinde varsa, belirtilen değer "value1, value2, value3" biçimindeki virgülle ayrılmış mevcut değerler listesine eklenir.

Jüri, spec olmadığı için tekrarlanan tuşlarda biraz dışarıda gibi görünüyor . Bu durumda, birden fazla anahtar (sahte) dizi olarak saklanır. Ama bunu not do do not diziler içine virgül dayalı değerleri işlemek.

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

Bu bir süre önce yarattığım bir fonksiyon ve oldukça mutluyum. Büyük / küçük harfe duyarlı değildir - ki bu kullanışlı bir yöntemdir. Ayrıca, istenen QS yoksa, boş bir dize döndürür.

Bunun sıkıştırılmış bir sürümünü kullanıyorum. Neler olduğunu daha iyi açıklamak için acemi türler için sıkıştırılmamış gönderiyorum.

Eminim bu daha hızlı çalışmak için optimize edilebilir veya farklı yapılabilir, ancak ihtiyacım olan şey için her zaman harika çalıştı.

Zevk almak.

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

Bu sorunu bir kez ve herkes için çözmeyi amaçlayan bir proje olan arg.js'yi yeni yayınladık . Geleneksel olarak çok zor oldu ama şimdi şunları yapabilirsiniz:

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

veya tüm partiyi almak:

var params = Arg.all();

ve arasındaki farkı önemsiyorsanız ?query=trueve #hash=truesonra Arg.query()ve Arg.hash()yöntemlerini kullanabilirsiniz .

Bu sorunun en üstteki cevabındaki sorun, #'dan sonra desteklenmeyen parametrelerin olmasıdır, ancak bazen bu değeri de almak gerekir.

Ben de bir karma işareti ile tam bir sorgu dizesi ayrıştırmak için cevap değiştirildi:

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

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'nin bu olduğu varsayılarak bu işlevi nasıl kullanabilirsiniz?

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

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

Eğer Browserify kullanıyorsanız, kullanabileceğiniz urlgelen modülü node.js :

var url = require('url');

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

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

İlave okumalar: URL Node.js v0.12.2 El Kitabı ve Belgeler

DÜZENLEME: URL arayüzünü kullanabilirsiniz , hemen hemen tüm yeni tarayıcılarda oldukça yaygındır ve kod eski bir tarayıcıda çalışacaksa, bunun gibi bir çoklu dolgu kullanabilirsiniz . Sorgu parametrelerini (arama parametreleri olarak da bilinir) almak için URL arayüzünü nasıl kullanacağınıza ilişkin bir kod örneği

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

Bunun için URLSearchParams'ı da kullanabilirsiniz, MDN'den URLSearchParams ile yapmak için bir örnek :

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"