Esiste un modo senza plug-in per recuperare i valori della stringa di query tramite jQuery (o senza)?

Se é cosi, come? In caso contrario, esiste un plug-in che può farlo?

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 è necessario jQuery a tale scopo. Puoi usare solo un po 'di JavaScript puro:

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 al riguardo e gli utilizzi variano, vedere ad esempio questa domanda: Posizione autorevole di chiavi di query HTTP GET duplicate .
NOTA: la funzione distingue tra maiuscole e minuscole. Se si preferisce il nome del parametro senza distinzione tra maiuscole e minuscole, aggiungere il modificatore 'i' a RegExp

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

Alcune delle soluzioni pubblicate qui sono inefficienti. Ripetere la ricerca di espressioni regolari ogni volta che lo script deve accedere a un parametro è completamente inutile, è sufficiente un'unica funzione per suddividere i parametri in un oggetto stile array associativo. Se non lavori con l'API della cronologia HTML 5, questo è necessario solo una volta per caricamento della pagina. Anche gli altri suggerimenti qui 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.location.search.substring(1);

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

Esempio di 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 essere facilmente migliorato per gestire anche stringhe di query in stile array. Un esempio di questo è qui , ma dal momento che i parametri di array-stile non sono definiti nella RFC 3986 non voglio inquinare questa risposta con il codice sorgente. Per coloro che sono interessati a una versione "inquinata", guarda la risposta di campbeln di seguito .

Inoltre, come sottolineato nei commenti, ;è un delimitatore legale per le key=valuecoppie. Richiederebbe una regex più complicata da gestire ;o &, che ritengo inutile perché è raro che ;sia usato e direi ancora più improbabile che entrambi vengano usati. Se devi supportare ;invece di &, scambiali nella regex.

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

Molto più semplice!

AGGIORNATO

Una nuova capacità sarebbe quella di recuperare i parametri ripetuti come segue myparam=1&myparam=2. Non esiste una specifica , tuttavia, la maggior parte degli approcci attuali segue la generazione di un array.

myparam = ["1", "2"]

Quindi, questo è l'approccio per gestirlo:

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

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 simile ?topic=123&name=query+string, verrà restituito quanto segue:

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. Non funziona perché alcune variabili non sono definite.

Cominciano a cercare parametri sull'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, controllano se il parametro ha un valore oppure no, se è così memorizzano il valore di d, altrimenti continuano semplicemente.

Alla fine l'oggetto dviene restituito, gestendo l'escaping e il +segno. Questo oggetto è proprio come il 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 diviso rispetto al metodo regex) ( jsPerf )

Codice di preparazione: dichiarazione dei metodi

Codice di prova diviso

var qs = window.GetQueryString(query);

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

Codice di test Regex

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

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

• Metodo split : 144.780 ± 2,17% più veloce
• Metodo Regex : 13.891 ± 0,85% | 90% più lento

Versione migliorata della risposta di Artem Barger :

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

Per ulteriori informazioni sul miglioramento, consultare: http://james.padolsey.com/javascript/bujs-1-getparameterbyname/

URLSearchParams

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

• Annuncio e dettagli di Chrome
• Annuncio e dettagli dell'Opera
• Annuncio e dettagli di Firefox

Esiste un polyfill URLSearchParams suggerito da Google per le versioni stabili di IE.

Non è standardizzato dal W3C , ma è uno standard vivente di WhatWG .

Puoi usarlo su location:

let params = new URLSearchParams(location.search);

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

Puoi ottenere parametri anche usando una .searchParamsproprietà abbreviata sull'oggetto URL, in questo modo:

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

Hai letto / parametri impostati 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 di una pagina di esempio sono disponibili per la verifica e collaudo.

Solo un'altra raccomandazione. Il plug-in Purl 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 è più gestito e l'autore consiglia invece di utilizzare URI.js. Il plugin jQuery è diverso in quanto si concentra sugli elementi: per l'uso con le stringhe, basta usare URIdirettamente, con o senza jQuery. 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'

tl; dr

Una soluzione rapida e 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)})

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

Che cos'è tutto questo codice ...
"null-coalescing" , valutazione del corto circuito
ES6 Assegnazioni di destrutturazione , funzioni delle frecce , stringhe di modelli

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

Maggiori informazioni ... sulla soluzione JavaScript Vanilla.

Per accedere a diverse parti di un URL utilizzare 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]})

• Gestisce le chiavi vuote correttamente.
• Sostituisce i tasti multipli con l' 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 chiave semplice (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 restituisce invece array .
• Accedi ai valori con qd.key[index]oqd[key][index]

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

Personaggi codificati?

Utilizzare decodeURIComponent()per la seconda o entrambe le divisioni.

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"]

Dai commenti

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

v = v && decodeURIComponent(v);

Se la stringa di query è vuota ( location.search == ""), il risultato è in qualche modo fuorviante qd == {"": undefined}. Si consiglia di controllare la stringa di query prima di avviare la funzione di analisi like:

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

Roshambo su snipplr.com ha un semplice script per raggiungere questo obiettivo descritto in Ottieni parametri URL con jQuery | Migliorata . Con la sua sceneggiatura puoi anche facilmente estrarre solo i parametri che desideri.

Ecco l'essenza:

$.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 basta ottenere i parametri dalla stringa di query.

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

Chiama var langval = $.urlParam('lang');e hai capito.

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

Se si utilizza jQuery, è possibile utilizzare una libreria, ad esempio jQuery BBQ: pulsante Indietro e libreria di query .

... jQuery BBQ fornisce un .deparam()metodo completo , insieme alla gestione dello stato hash e ai metodi di utilità di analisi e unione delle stringhe di frammenti / query.

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 si desidera utilizzare solo JavaScript semplice, è possibile utilizzare ...

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 di cronologia HTML e in particolare history.pushState()e history.replaceState(), l'URL può cambiare il che invaliderà la cache dei parametri e dei loro valori.

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

Usa solo due divisioni :

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

Stavo leggendo tutte le risposte precedenti e più complete. Ma penso che sia il metodo più semplice e veloce. Puoi controllare in questo benchmark jsPerf

Per risolvere il problema nel commento di Rup, aggiungi una divisione condizionale cambiando la prima riga con le due seguenti. Ma l'accuratezza assoluta significa che ora è più lento di regexp (vedi 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;
}

Quindi, se sai che non ti imbatterai nel contro-caso di Rup, questo vince. Altrimenti, regexp.

Oppure, se hai il controllo della stringa di query e puoi garantire che un valore che stai cercando di ottenere non conterrà mai alcun carattere codificato URL (avere questi in un valore sarebbe una cattiva idea) - puoi usare la seguente versione leggermente più semplificata e leggibile della prima opzione:

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

Ecco la mia pugnalata nel trasformare l'eccellente soluzione di Andy E in un plugin jQuery completo:

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

La sintassi è:

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

Il meglio di entrambi i mondi!

Se stai manipolando più URL che semplicemente analizzando la stringa di query , potresti trovare utile URI.js. È una libreria per manipolare gli URL - e viene fornito con tutte le campane e fischietti. (Ci scusiamo per l'auto-pubblicità qui)

per convertire la stringa di querystring in una mappa:

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

(URI.js anche "correzioni" cattivi querystrings piace ?&foo&&bar=baz&a ?foo&bar=baz)

Mi piace la soluzione di Ryan Phelan . Ma non vedo alcun punto di estensione di jQuery per questo? Non è possibile utilizzare la funzionalità jQuery.

D'altra parte, mi piace la funzione integrata in Google Chrome: window.location.getParameter.

Quindi perché non usarlo? Ok, altri browser non ce l'hanno. Quindi creiamo questa funzione se non esiste:

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

Questa funzione è più o meno di Ryan Phelan, ma è racchiusa in modo diverso: nome chiaro e nessuna dipendenza da altre librerie javascript. Maggiori informazioni su questa funzione sul mio blog .

Ecco un modo rapido per ottenere un oggetto simile all'array PHP $ _GET :

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

Uso:

var $_GET = get_query();

Per la stringa di query x=5&y&z=hello&x=6restituisce l'oggetto:

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

Mantienilo semplice nel semplice codice JavaScript:

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

Chiamalo da qualsiasi parte del codice JavaScript:

var result = qs('someKey');

Queste sono tutte ottime risposte, ma avevo bisogno di qualcosa di un po 'più robusto e pensavo che tutti voi potreste avere ciò che ho creato.

È un semplice metodo di libreria che esegue dissezione e manipolazione dei parametri URL. Il metodo statico ha i seguenti metodi secondari che possono essere chiamati sull'URL soggetto:

• getHost
• getPath
• gethash
• setHash
• getparams
• getQuery
• SetParam
• getParam
• hasParam
• RemoveParam

Esempio:

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

Dal MDN :

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

alert(loadPageVar("name"));

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

Visualizzalo!

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

Sul mio Mac: test.htm?i=can&has=cheezburgervisualizza

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

Uso molte espressioni regolari, ma non per quello.

Mi sembra più facile ed efficiente leggere la stringa di query una volta nella mia applicazione e creare un oggetto da tutte le coppie chiave / valore come:

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

Per un URL come http://domain.com?param1=val1&param2=val2questo puoi ottenere il loro valore in un secondo momento nel tuo codice come search.param1e 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

Il metodo jQuery di Roshambo non si occupava dell'URL di decodifica

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

Ho appena aggiunto questa funzionalità anche durante l'aggiunta nell'istruzione return

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

Ora puoi trovare l'essenza aggiornata:

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

Mi piace questo (tratto da jquery-howto.blogspot.co.uk):

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

Funziona benissimo per me.

Ecco la mia modifica a questa eccellente risposta , con l'ulteriore possibilità di analizzare le stringhe di query con chiavi senza valori.

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

IMPORTANTE! Il parametro per quella funzione nell'ultima riga è diverso. È solo un esempio di come si può passare un URL arbitrario ad esso. Puoi usare l'ultima riga della risposta di Bruno per analizzare l'URL corrente.

Quindi cosa è cambiato esattamente? Con url i http://sb.com/reg/step1?param=risultati saranno gli stessi. Ma con url http://sb.com/reg/step1?paramla soluzione di Bruno restituisce un oggetto senza chiavi, mentre il mio restituisce un oggetto con chiave parame undefinedvalore.

Avevo bisogno di un oggetto dalla stringa di query e odio molto codice. Potrebbe non essere il più robusto dell'universo, ma è solo alcune righe di codice.

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

Un URL simile this.htm?hello=world&foo=barcreerà:

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

Ecco una versione estesa della versione collegata di "Gestisci stringhe di query in stile array" di Andy E. Risolto un bug ( ?key=1&key[]=2&key[]=3; 1viene perso e sostituito con [2,3]), apportato alcuni piccoli miglioramenti delle prestazioni (decodifica dei valori, ricalcolo della posizione "[", ecc.) E aggiunta di numerosi miglioramenti (funzionalizzati, supporto per ?key=1&key=2, supporto per i ;delimitatori) . Ho lasciato le variabili fastidiosamente brevi, ma ho aggiunto molti commenti per renderle leggibili (oh, e ho riutilizzato vall'interno delle funzioni locali, scusate se ciò è confuso;).

Gestirà la seguente stringa di query ...

? Test = Ciao & persona = neek & persona [] = Jeff & persona [] = Jim & persona [extra] = John & test3 & nocache = 1.398.914,891264 millions

... trasformandolo in un oggetto che sembra ...

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

Come puoi vedere sopra, questa versione gestisce alcune misure di array "non validi", ovvero - person=neek&person[]=jeff&person[]=jimo person=neek&person=jeff&person=jimpoiché la chiave è identificabile e valida (almeno in NameValueCollection.Add di dotNet ):

Se la chiave specificata esiste già nell'istanza NameValueCollection di destinazione, il valore specificato viene aggiunto all'elenco di valori separato da virgole esistente nel formato "valore1, valore2, valore3".

Sembra che la giuria sia in qualche modo fuori dai tasti ripetuti in quanto non ci sono specifiche. In questo caso, più chiavi vengono archiviate come un array (falso). Ma nota che non elaboro valori basati su virgole in array.

Il codice:

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

Questa è una funzione che ho creato qualche tempo fa e di cui sono abbastanza contento. Non distingue tra maiuscole e minuscole, il che è utile. Inoltre, se il QS richiesto non esiste, restituisce solo una stringa vuota.

Uso una versione compressa di questo. Sto postando non compresso per i tipi alle prime armi per spiegare meglio cosa sta succedendo.

Sono sicuro che questo potrebbe essere ottimizzato o fatto diversamente per funzionare più velocemente, ma ha sempre funzionato alla grande per quello di cui ho bisogno.

Godere.

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

Abbiamo appena rilasciato arg.js , un progetto volto a risolvere questo problema una volta per tutte. Tradizionalmente è stato così difficile ma ora puoi fare:

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

o ottenere l'intero lotto:

var params = Arg.all();

e se ti interessa la differenza tra ?query=truee #hash=trueallora puoi usare i metodi Arg.query()e Arg.hash().

Il problema con la risposta migliore su questa domanda è che non sono parametri supportati posizionati dopo #, ma a volte è necessario ottenere anche questo valore.

Ho modificato la risposta per consentirle di analizzare anche una stringa di query completa con un segno hash:

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

Ed è così che puoi usare questa funzione supponendo che sia l'URL

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

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

Se si utilizza Browserify, è possibile utilizzare il urlmodulo da Node.js :

var url = require('url');

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

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

Ulteriori letture: URL Node.js v0.12.2 Manuale e documentazione

EDIT: puoi usare l' interfaccia URL , che è ampiamente adottata in quasi tutti i nuovi browser e se il codice verrà eseguito su un vecchio browser puoi usare un polyfill come questo . Ecco un esempio di codice su come utilizzare l'interfaccia URL per ottenere parametri di query (ovvero parametri di ricerca)

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

Puoi anche usare URLSearchParams per questo, ecco un esempio da MDN per farlo con URLSearchParams:

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"