Come posso ottenere valori di query string in JavaScript?

C'è un modo senza plugin per recuperare i valori di query string tramite jQuery (o senza)?

Se sì, come? Se no, c'è un plugin che può farlo?

Brad Larson
Domanda modificata 7º aprile 2015 в 12:55
Programmazione
plugins query-string javascript url
23º maggio 2009 в 8:10
20 visualizzazioni
Soluzione

Aggiornamento: settembre-2018

Puoi usare URLSearchParams che è semplice e ha un supporto browser decente (ma non completo).

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

Originale

Non hai bisogno di jQuery per questo scopo. Puoi usare solo del 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, ' '));
}

Utilizzo:

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

br> Nota: se un parametro è presente più volte (?foo=lorem&foo=ipsum), si ottiene il primo valore (lorem). Non c'è uno standard su questo e gli usi variano, vedi per esempio questa domanda: Posizione autorevole di chiavi di query HTTP GET duplicate.
NOTA: la funzione è sensibile alle maiuscole e alle minuscole. Se si preferisce il nome del parametro insensibile alle maiuscole, aggiungere 'i' modificatore a RegExp

Questo è un aggiornamento basato sulle nuove specifiche URLSearchParams per ottenere lo stesso risultato in modo più succinto. Vedi la risposta intitolata "URLSearchParams" qui sotto.

Martin Tournoij
Risposta modificata 6º agosto 2019 в 7:12
Commentari (52)

Roshambo su snipplr.com ha un semplice script per ottenere questo descritto in Get URL Parameters with jQuery | Improved. Con il suo script potete anche estrarre facilmente solo i parametri che volete.

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

Poi basta ottenere i tuoi parametri dalla stringa di query.

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

Basta chiamare var langval = $.urlParam('lang');, e hai capito.

UZBEKJON ha un grande post sul blog anche su questo, Get URL parameters & values with jQuery.

Yahel
Risposta modificata 4º febbraio 2016 в 6:51
Commentari (3)

Se stai usando jQuery, puoi usare una libreria, come jQuery BBQ: Back Button & Query Library.

...jQuery BBQ fornisce un metodo completo .deparam(), insieme alla gestione dello stato dell'hash e ai metodi di utilità per l'analisi e la fusione dei frammenti e delle stringhe di query.

Modifica: Aggiunta di un esempio di 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 il semplice JavaScript, potresti 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 HTML History e in particolare history.pushState() e history.replaceState(), l'URL può cambiare, il che invaliderà la cache dei parametri e i loro valori.

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

Ben Call
Risposta modificata 9º ottobre 2014 в 4:13
Commentari (0)