Como posso obter os valores das strings de consulta em JavaScript?

Existe uma forma sem plugins de recuperar valores query string via jQuery (ou sem)?

Se sim, como? Se não, há algum plugin que o possa fazer?

Brad Larson
Pergunta editada :em
Programação
plugins query-string javascript url
23º maio 2009 в 8:10
23 vistas
Solução

**Atualização: Set-2018***

Você pode usar URLSearchParams que é simples e tem suporte decente (mas não completo) ao navegador.

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

**Original***

Você não precisa de jQuery para esse propósito. Você pode usar apenas algum 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, ' '));
}

Usagem:

// 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 um parâmetro estiver presente várias vezes (?foo=lorem&foo=ipsum), você receberá o primeiro valor (lorem). Não há um padrão sobre isto e os usos variam, veja por exemplo esta pergunta: Posição autorizada das chaves de consulta HTTP GET duplicadas.
NOTA: A função é sensível a maiúsculas e minúsculas. Se preferir o nome de parâmetro que não diferencia maiúsculas de minúsculas, adicionar 'i' modificador ao RegExp.

Esta é uma atualização baseada nas novas especificações URLSearchParams para alcançar o mesmo resultado de forma mais sucinta. Veja a resposta intitulada "URLSearchParams" abaixo.

Martin Tournoij
Resposta editada :em
Comentários (52)

Roshambo no snipplr.com tem um script simples para conseguir isso descrito em Obter Parâmetros de URL com jQuery | Improved. Com o seu script você também consegue facilmente extrair apenas os parâmetros que você quer.

Aqui está a essência:

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

Depois basta obter os seus parâmetros a partir da cadeia de consulta.

Então, se a URL/caderno de consulta fosse xyz.com/index.html?lang=de.

Basta chamar var langval = $.urlParam('lang');, e você o tem.

UZBEKJON tem um ótimo post no blog sobre isso também, Obter parâmetros e valores de URL com jQuery.

Yahel
Resposta editada :em
Comentários (3)

Se você estiver usando jQuery, você pode usar uma biblioteca, como jQuery BBQ: Back Button & Query Library.

...jQuery BBQ fornece um método completo .deparam(), juntamente com o gerenciamento do estado do hash, e os métodos de fragmentação / query string parse e merge utility.

Editar: Adicionando Exemplo 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 quiser usar apenas o JavaScript, pode usar...

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

})();​

Por causa da nova API de histórico HTML e especificamente history.pushState() e history.replaceState(), a URL pode mudar o que invalidará o cache de parâmetros e seus valores.

Esta versão irá actualizar o seu cache interno de parâmetros cada vez que o histórico mudar.

Ben Call
Resposta editada :em
Comentários (0)