Domanda Come posso ottenere valori stringa di query in JavaScript?


Esiste un modo di recuperare senza plug-in stringa della domanda valori via jQuery (o senza)?

Se é cosi, come? Se no, c'è un plugin che può farlo?


2703


origine


risposte:


Non hai bisogno di jQuery per questo scopo. Puoi usare solo un puro JavaScript:

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

Uso:

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


Nota: se un parametro è presente più volte (?foo=lorem&foo=ipsum), otterrai il primo valore (lorem). Non esiste uno standard su questo e gli usi variano, vedi ad esempio questa domanda: Posizione autorevole delle chiavi di query HTTP GET duplicate.
NOTA: la funzione fa distinzione tra maiuscole e minuscole. Se si preferisce il nome del parametro senza distinzione tra maiuscole e minuscole, aggiungi il modificatore 'i' a RegExp


Questo è un aggiornamento basato sul nuovo Specifiche di URLSearchParams per ottenere lo stesso risultato in modo più sintetico. Vedi la risposta intitolata "URLSearchParams" sotto.


7015



Alcune delle soluzioni pubblicate qui sono inefficienti. La ripetizione della ricerca di espressioni regolari ogni volta che lo script deve accedere a un parametro è completamente inutile, una sola funzione per dividere i parametri in un oggetto di stile array associativo è sufficiente. Se non stai lavorando con l'HTML 5 History API, questo è necessario solo una volta per caricamento della pagina. Anche qui gli altri suggerimenti non riescono a decodificare correttamente l'URL.

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

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

Esempio querystring:

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

Risultato:

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

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

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

Questo potrebbe facilmente essere migliorato per gestire anche le stringhe di query in stile array. Un esempio di questo è Qui, ma dal momento che i parametri in stile array non sono definiti in RFC 3986 Non inquinerò questa risposta con il codice sorgente. Per chi è interessato a una versione "inquinata", guarda sotto la risposta di Campbeln.

Inoltre, come sottolineato nei commenti, ; è un delimitatore legale per key=value accoppiamenti. Richiederebbe una regex più complessa da gestire ; o &, che penso non sia necessario perché è raro questo ; è usato e direi ancora più improbabile che entrambi vengano usati. Se hai bisogno di supporto ; invece di &, basta scambiarli nella regex.


  Se stai usando un linguaggio di pre-elaborazione lato server, potresti voler usare le sue funzioni JSON native per fare il lavoro più impegnativo. Ad esempio, in PHP puoi scrivere:

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

Molto più semplice!


1626



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

Senza jQuery

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

Con un URL come ?topic=123&name=query+string, il seguente restituirà:

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

Metodo di Google

Strappando il codice di Google ho trovato il metodo che usano: 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
}

È offuscato, ma è comprensibile.

Iniziano a cercare i parametri nell'URL da ? e anche dall'hash #. Quindi per ogni parametro si dividono nel segno di uguale b[f][p]("=") (che assomiglia indexOf, usano la posizione del carattere per ottenere la chiave / valore). Dopo averlo diviso, controlla se il parametro ha un valore o meno, se ha quindi memorizzato il valore di d, altrimenti continuano semplicemente.

Alla fine l'oggetto d viene restituito, gestendo la fuga e il + cartello. Questo oggetto è uguale al mio, ha lo stesso comportamento.


Il mio metodo come plugin jQuery

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

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

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

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

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

uso

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

Test delle prestazioni (metodo split rispetto al metodo regex) (jsPerf)

Codice di preparazione: dichiarazione dei metodi

Split test code

var qs = window.GetQueryString(query);

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

Codice di prova Regex

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

Test su Firefox 4.0 x86 su Windows Server 2008 R2 / 7 x64

  • Metodo diviso: 144,780 ± 2,17% più veloce
  • Metodo Regex: 13,891 ± 0,85% | 90% più lento

1193



Versione migliorata di La risposta di Artem Barger:

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

Per maggiori informazioni sul miglioramento vedi: http://james.padolsey.com/javascript/bujs-1-getparameterbyname/


636



URLSearchParams

Firefox 44+, Opera 36+, Edge 17+, Safari 10.3+ e Chrome 49+ supportano URLSearchParams API:

C'è un suggerimento su google URLSearchParams polyfill per le versioni stabili di IE.

Non è standardizzato da W3C, ma è uno standard di vita di WHATWG.

Puoi usarlo sul posto, ma devi rimuovere il ? punto interrogativo (ad esempio, con .slice(1)):

let params = new URLSearchParams(location.search.slice(1));

o

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

O ovviamente su qualsiasi URL:

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

Puoi ottenere parametri usando anche una scorciatoia .searchParams proprietà sull'oggetto URL, come questo:

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

Leggere / impostare i parametri attraverso il get(KEY), set(KEY, VALUE), append(KEY, VALUE) API. Puoi anche scorrere su tutti i valori for (let p of params) {}.

UN implementazione di riferimento e a Pagina di esempio sono disponibili per auditing e test.


481



Solo un'altra raccomandazione Il plugin punto a rovescio consente di recuperare tutte le parti dell'URL, inclusi anchor, host, ecc.

Può essere utilizzato con o senza jQuery.

L'utilizzo è molto semplice e interessante:

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'

Tuttavia, a partire dall'11 novembre 2014, Purl non viene più mantenuto e l'autore consiglia di utilizzarlo URI.js anziché. Il plugin jQuery è diverso in quanto si concentra sugli elementi - per l'utilizzo con le stringhe, basta usare URI direttamente, con o senza jQuery. Il codice simile apparirebbe come tale, documenti più completi Qui:

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'

394



Roshambo su snipplr.com ha uno script semplice per ottenere ciò descritto in Ottieni parametri URL con jQuery | migliorata. Con la sua sceneggiatura puoi anche facilmente estrarre solo i parametri che desideri.

Ecco il succo:

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

Quindi recupera i parametri dalla stringa di query.

Quindi, se la stringa URL / query era xyz.com/index.html?lang=de.

Chiama soltanto var langval = $.urlParam('lang');e ce l'hai

UZBEKJON ha anche un ottimo post sul blog, Ottieni parametri e valori URL con jQuery.


215



tl; dr

Un veloce, soluzione completa, che gestisce chiavi multivalore e caratteri codificati.

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)})
Multi-foderato:
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
})

Cos'è tutto questo codice ...
"Null-coalescenza", valutazione del cortocircuito
ES6 Incarichi distruttivi, Funzioni della freccia, Stringhe di modelli

Esempio:
"?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"



Ulteriori informazioni ... sulla soluzione JavaScript di Vanilla.

Utilizzare per accedere a diverse parti di un URL location.(search|hash)

La soluzione più semplice (fittizia)

var queryDict = {};
location.search.substr(1).split("&").forEach(function(item) {queryDict[item.split("=")[0]] = item.split("=")[1]})
  • maniglie chiavi vuote correttamente.
  • Sostituzioni multi-tasti con ultimo valore trovato
"?a=1&b=0&c=3&d&e&a=5"
> queryDict
a: "5"
b: "0"
c: "3"
d: undefined
e: undefined

Chiavi multivalore

Controllo semplice della chiave (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]]})
  • Ora ritorna array anziché.
  • Accedere ai valori di qd.key[index] o qd[key][index]
> qd
a: ["1", "5"]
b: ["0"]
c: ["3"]
d: [undefined]
e: [undefined]

Caratteri codificati?

Uso decodeURIComponent() per il secondo o entrambi divide.

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]})
Esempio:
"?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"]



Dai commenti

* !!! Si prega di notare che decodeURIComponent(undefined) restituisce una stringa "undefined". La soluzione sta in un semplice utilizzo di &&, che lo garantisce decodeURIComponent() non viene chiamato su valori indefiniti. (Vedi la "soluzione completa" in alto.)

v = v && decodeURIComponent(v);


Se la querystring è vuota (location.search == ""), il risultato è in qualche modo fuorviante qd == {"": undefined}. Si consiglia di controllare la querystring prima di lanciare la funzione di parsing mi piace:

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

215



Se stai usando jQuery, puoi usare una libreria, come jQuery BBQ: pulsante Indietro e libreria di query.

... jQuery BBQ fornisce un pieno .deparam() metodo, insieme alla gestione dello stato hash e ai metodi di analisi delle stringhe di frammentazione / query parsing e merge.

Modifica: aggiunta di esempio Deparam:

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

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

Se vuoi usare solo JavaScript semplice, puoi usare ...

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

})();​

A causa della nuova API Cronologia HTML e in particolare history.pushState() e history.replaceState(), l'URL può cambiare e invalida la cache dei parametri e i loro valori.

Questa versione aggiornerà la cache interna dei parametri ogni volta che cambia la cronologia.


164