Como posso obter valores de string de consulta em JavaScript?


2697

Existe uma maneira sem plug-in de recuperar valores de string de consulta via jQuery (ou sem)?

Se sim, como? Caso contrário, existe um plugin que pode fazer isso?


Eu uso o plugin getUrlParam descrito em jQuery-Plugin - getUrlParam (versão 2) .
coma

69
A javascript simples solução sem RegEx: css-tricks.com/snippets/javascript/get-url-variables
Lorenzo Polidori

6
Embora a melhor solução para a questão mereça popularidade devido à excelente observação de que o jQuery não é necessário, seu método de criar novas expressões regulares e analisar novamente a cadeia de consulta para cada parâmetro desejado é extremamente ineficiente. Soluções muito mais eficientes (e versáteis) já existem há muito tempo, por exemplo, neste artigo, reimpresso aqui: htmlgoodies.com/beyond/javascript/article.php/11877_3755006_3/…
Joseph Myers

1
possível duplicata da string de consulta JavaScript

4
Joseph, a "excelente observação de que o jQuery não é necessário"? Claro que não é necessário. Tudo o que o jQuery faz, ele usa JavaScript. As pessoas não usam o jQuery porque ele faz coisas que o JavaScript não pode fazer. O objetivo do jQuery é a conveniência.
Vladimir Kornea

Respostas:


8327

Atualização: Sep-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 do jQuery para esse fim. 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, ' '));
}

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


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


131
Como essa função lida com http://www.mysite.com/index.php?x=x1&x=x2&x=x3o valor do campo xé ambíguo.
dpp

94
isso também não lida com chaves com valores múltiplos , o que também é perfeitamente legal.
precisa saber é o seguinte

17
Por que você usaria uma expressão regular para isso?
Ry-

28
Para uma string de ?mykey=0&m.+key=1consulta de , a chamada getParameterByName("m.+key")retornaria em 0vez de 1. Você precisa escapar dos metacaracteres da expressão regular nameantes de criar sua expressão regular. E você só precisa chamar .replace()uma vez usando o sinalizador global e usando "\\$&"como expressão de substituição. Você deve procurar em location.searchvez de location.href. Uma resposta com mais de 400 votos positivos deve levar em conta esses detalhes.
precisa saber é o seguinte

7
Você não precisa do jQuery para esse ou qualquer outro propósito. Você simplesmente não precisa disso.
Gztomas # 30/13

1708

Algumas das soluções postadas aqui são ineficientes. Repetir a pesquisa de expressão regular toda vez que o script precisar acessar um parâmetro é completamente desnecessário, basta uma única função para dividir os parâmetros em um objeto de estilo de matriz associativa. Se você não estiver trabalhando com a API de histórico do HTML 5, isso será necessário apenas uma vez por carregamento da página. As outras sugestões aqui também falham ao decodificar o URL corretamente.

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

Exemplo de string de consulta:

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

Resultado:

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

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

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

Isso poderia ser facilmente aprimorado para lidar também com cadeias de consulta no estilo de matriz. Um exemplo disso está aqui , mas como os parâmetros de estilo de matriz não estão definidos no RFC 3986 , não poluirei esta resposta com o código-fonte. Para os interessados ​​em uma versão "poluída", veja a resposta da campbeln abaixo .

Além disso, como apontado nos comentários, ;é um delimitador legal para key=valuepares. Seria necessário um regex mais complicado para manipular ;ou &, o que eu acho desnecessário, porque é raro o ;uso e eu diria ainda mais improvável que ambos sejam usados. Se você precisar dar suporte ao ;invés de &, basta trocá-los na regex.


Se você estiver usando uma linguagem de pré-processamento do servidor, convém usar suas funções JSON nativas para fazer o trabalho pesado para você. Por exemplo, em PHP, você pode escrever:

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

Muito mais simples!

ATUALIZADA

Um novo recurso seria recuperar parâmetros repetidos da seguinte forma myparam=1&myparam=2. Não há uma especificação , no entanto, a maioria das abordagens atuais segue a geração de uma matriz.

myparam = ["1", "2"]

Portanto, esta é a abordagem para gerenciá-lo:

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

11
se você estiver usando um aplicativo fortemente ajax, poderá usar o hash (#) para "ativar o botão voltar" ... nesse caso, a string de consulta mudaria o tempo todo (veja como o Facebook faz). .. embora estas soluções ignorar as coisas que vêm após o # anways ...
Nick Franceschina

100
@ Nick: Qualquer coisa após o hash reside na window.location.hashpropriedade, que é separada da window.location.searchpropriedade. Se o hash for alterado, não afetará a string de consulta.
Andy E

27
Não se esqueça de que ;é um delimitador legal para key=valuepares GET . É raro, mas leva 5 segundos para implementar.
alex

4
Para ser justo, nenhum formato específico para a string de consulta é definido pelo RFC3986. ?a=b&c=dé convencional e uma recomendação do W3C para formulários da Web, mas a especificação do URI apenas define query = *( pchar / "/" / "?" ).
Matthew Gilliard

21
Para aqueles de nós usando uma configuração bastante rígida de JSHint trocar o while(match = search.exec(query))comwhile((match = search.exec(query)) !== null)
craigts

1283

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

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

Com um URL como ?topic=123&name=query+string, o seguinte retornará:

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

Método do Google

Rasgando o código do Google, encontrei o método que eles usam: 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
}

É ofuscado, mas é compreensível. Não funciona porque algumas variáveis ​​são indefinidas.

Eles começam a procurar parâmetros no URL ?e também no hash #. Em seguida, para cada parâmetro, eles se dividem no sinal de igual b[f][p]("=")(que parece indexOf, eles usam a posição do caractere para obter a chave / valor). Com a divisão, eles verificam se o parâmetro tem um valor ou não; se tiver, eles armazenam o valor de d; caso contrário, eles continuam.

No final, o objeto dé retornado, manipulando escape e o +sinal. Este objeto é como o meu, tem o mesmo comportamento.


Meu método como um 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));

Teste de desempenho (método de divisão contra o método regex) ( jsPerf )

Código de preparação: declaração de métodos

Código de teste dividido

var qs = window.GetQueryString(query);

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

Código de teste Regex

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

Testando no Firefox 4.0 x86 no Windows Server 2008 R2 / 7 x64

  • Método de divisão : 144.780 ± 2,17% mais rápido
  • Método Regex : 13,891 ± 0,85% | 90% mais lento

1
Essa também é uma boa abordagem, dividindo as strings em vez de usar expressões regulares. Há algumas coisas que merecem destaque, embora :-) 1. unescapeseja uma função obsoleta e substituída por decodeURIComponent(), observe que nenhuma dessas funções decodificará corretamente +um caractere de espaço. 2. Você deve declarar o resultado como um objeto, em vez de uma matriz, porque o JavaScript não possui matrizes associativas, por si só, e a matriz que você declara é tratada como um objeto, atribuindo propriedades nomeadas a ele de qualquer maneira.
Andy E

55
Curioso por que você faria deste um plugin do jQuery quando não possui nenhum código específico do jQuery?
zachleat

63
@zachleat, se você não tiver um framework, suas funções serão espalhadas pelo seu código. Se você estender o jQuery, terá um escopo para suas funções, ele não estará flutuando em algum lugar do seu código. Eu acho que é a única razão.
BrunoLM 23/02

6
Aqui está a versão do jQuery ajustada para passar o JSLint (pelo menos o destino semi-móvel de JSLint.com em 15/06/2011). Principalmente apenas movendo as coisas para apaziguar The Crockford.
patridge

3
Como brincou @BenjaminGruenbaum, eu também não entendo o ponto de comparar o desempenho da análise de URL. Se isso foi transformado em um módulo JavaScript isomórfico que poderia ser chamado do Node para, digamos, analisar logs, então sim. Mas usá-lo para extrair parâmetros de URL window.locationfaz com que qualquer desempenho se preocupe, já que o cliente que navega para o URL é muito, muito mais caro.
Dan Dascalescu

659

Versão aprimorada da resposta de Artem Barger :

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

Para obter mais informações sobre melhoria, consulte: http://james.padolsey.com/javascript/bujs-1-getparameterbyname/


23
Se você quiser reduzi-lo um pouco mais, você pode acabar com o condicional ternário e substituí-lo por um pouco de curto-circuito na última linha - return match && decodeURIComponent(match[1].replace(/\+/g, ' '));.
Andy E

Retorna nullse o parâmetro não for seguido por '='. Você pode if (!RegExp('[?&]'+name+'(&.*)?$').exec(window.location.search)) return false;fazer um prefixo para fazê-lo retornar boolean falsese o parâmetro não estiver lá.
commonpike

9
Eu usaria o newprefixo ao criar o regex:var match = new RegExp('...
Patrick Berkeley

2
Bug no IE11: o IE decide acrescentar o valor retornado com o caractere ascii 8206 (hex: 200E - o "caractere da esquerda para a direita"). Eu perdi mais de 6 horas encontrando isso! ventilação terapêutica .... para corrigir, aderir ao final da última linha:.replace('\u200E', '')
JayRO-GreyBeard 31/15/15

No chrome em um mac, pelo menos (talvez em outros navegadores também), o último valor foi obter um '/' acrescentado. Então eu modifiquei o regex para ignorá-lo. var results = new RegExp('[\\?&]' + name + '=([^&#/]*)').exec(url);
CaseyB

594

URLSearchParams

Firefox 44+, Opera 36+, Edge 17+, Safari 10.3+ e Chrome 49+ são compatíveis com a API URLSearchParams :

Existe um polyfill URLSearchParams sugerido pelo Google para as versões estáveis ​​do IE.

Não é padronizado pelo W3C , mas é um padrão de vida do WhatWG .

Você pode usá-lo em location:

let params = new URLSearchParams(location.search);

ou

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

Ou, é claro, em qualquer URL:

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

Você pode obter parâmetros também usando uma .searchParamspropriedade abreviada no objeto URL, assim:

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

Você lê / parâmetros definidos pelo get(KEY), set(KEY, VALUE), append(KEY, VALUE)API. Você também pode iterar sobre todos os valores for (let p of params) {}.

Uma implementação de referência e uma página de amostra estão disponíveis para auditoria e teste.


Esses dois downvoters provavelmente perdidas (como eu fiz) o fato de que você tem que usar .getem vez de apenas.
Nakilon

20
Você realmente não precisa slice(1)de .search, você pode usá-lo diretamente. URLSearchParams pode lidar com os principais ?.
Jason C

URLSearchParamsnão é bom porque não retorna os valores reais dos parâmetros de um URL.
MELAB

Isso new URL('https://example.com?foo=1&bar=2') não está funcionando para url androidfile:///android_asset/...

O @Melab ainda é bom, pois fornece uma API simples para todos os erros estranhos nas outras respostas aqui. Mas também me surpreende que o id não faça window.location.search por padrão e que não há como atualizar o URL atual incluído.
Damon

400

Apenas outra recomendação. O plugin Purl permite recuperar todas as partes da URL, incluindo âncora, host, etc.

Pode ser usado com ou sem jQuery.

O uso é muito simples 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'

No entanto, a partir de 11 novembro de 2014, Purl há mantida durante mais tempo e o autor recomenda o uso URI.js vez. O plugin jQuery é diferente, pois se concentra nos elementos - para uso com strings, basta usar URIdiretamente, com ou sem jQuery. Código semelhante seria assim, documentos mais completos aqui :

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'

7
Como de escrever purl não é mais mantida e o mantenedor anterior sugere uri.js
Dan Pantry

238

tl; dr

Uma solução rápida e completa , que lida com chaves de vários valores e caracteres codificados .

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

O que é todo esse código ...
"coalescência nula" , avaliação de curto-circuito
ES6 Atribuições de reestruturação , funções de seta , seqüências de caracteres de modelo

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



Leia mais ... sobre a solução Vanilla JavaScript.

Para acessar diferentes partes de um URL, use location.(search|hash)

Solução mais fácil (fictícia)

var queryDict = {};
location.search.substr(1).split("&").forEach(function(item) {queryDict[item.split("=")[0]] = item.split("=")[1]})
  • Manipula chaves vazias corretamente.
  • Substitui várias chaves com o último valor encontrado.
"?a=1&b=0&c=3&d&e&a=5"
> queryDict
a: "5"
b: "0"
c: "3"
d: undefined
e: undefined

Chaves com vários valores

Verificação de chave simples (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]]})
  • Agora retorna matrizes .
  • Acesse valores por qd.key[index]ouqd[key][index]
> qd
a: ["1", "5"]
b: ["0"]
c: ["3"]
d: [undefined]
e: [undefined]

Caracteres codificados?

Use decodeURIComponent()para a segunda ou ambas as divisões.

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



Dos comentários

* !!! Observe que isso decodeURIComponent(undefined)retorna string "undefined". A solução está no uso simples de &&, o que garante que decodeURIComponent()não sejam chamados valores indefinidos. (Veja a "solução completa" na parte superior.)

v = v && decodeURIComponent(v);


Se a string de consulta estiver vazia ( location.search == ""), o resultado será um pouco enganador qd == {"": undefined}. Sugere-se verificar a sequência de consultas antes de iniciar a função de análise como:

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

1
Agradável. A única coisa que eu mudaria - é que, se não houver mais de um valor para uma chave, não será necessário que ela seja uma matriz. Use a matriz apenas se houver mais de um valor por chave.
Pavel Nikolov

2
@PavelNikolov Acho que introduziria dificuldades em obter algumas vezes uma matriz e outras vezes um valor. Você precisaria verificar primeiro, agora só verifica a duração, porque estará usando ciclos para recuperar esses valores de qualquer maneira. Além disso, era para ser a solução mais fácil, mas funcional, aqui.
Qwerty

@katsh Sim, de fato, ele funciona em> = IE9, no entanto, você pode ensinar seu processador javascript array.forEach()injetando certo código no início do seu script. consulte Polyfill developer.mozilla.org/pt-BR/docs/Web/JavaScript/Reference/…
Qwerty 21/14

1
Achatado um pouco para facilitar a leitura, transformado em uma função e reutilizou a chamada dividida: function parseQueryString () {var qd = {}; location.search.substr (1) .split ("&"). forEach (function (item) {var parts = item.split ("="); var k = partes [0]; var v = decodeURIComponent (parts [ 1]); (k em qd)? Qd [k]. Push (v): qd [k] = [v,]}); retornar qd; }
Casey

1
decodeDocumentURI (indefinido) retorna "indefinido" em vez de indefinido. Um patch funcional, mas não muito elegante: var qd = {}; location.search.substr(1).split("&").forEach( function(item) { var s = item.split("="), k = s[0], v; if(s.length>1) v = decodeURIComponent(s[1]); (k in qd) ? qd[k].push(v) : qd[k] = [v] })
loop

218

O Roshambo no snipplr.com possui um script simples para conseguir isso descrito em Obter parâmetros de URL com jQuery | Melhorado . Com o script dele, você também obtém facilmente os parâmetros que deseja.

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

Em seguida, basta obter seus parâmetros na string de consulta.

Portanto, se a URL / consulta for xyz.com/index.html?lang=de.

Basta ligar var langval = $.urlParam('lang');e você já conseguiu.

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


13
com jQuery parece significar namespace da função para o objeto jQuery. Além disso, por que o valor é inválido 0? Claro, eu poderia usar rigorosa verificação de igualdade, mas não deveria null?
alex

Acordado. Funciona exatamente como uma referência normal de variável javascript dessa maneira (exceto que talvez retornar indefinido seja mais preciso).
Isócrono

'name' não é escapado adequadamente, é apenas injetado diretamente no RegExp. Isso falha. Como outros já disseram, é inacreditável que essas respostas estejam reinventando a roda e ganhando tantos votos, quando isso deve ser implementado em uma biblioteca bem testada.
Triynko 24/10

167

Se você estiver usando o jQuery, poderá usar uma biblioteca, como o jQuery BBQ: botão Voltar e biblioteca de consultas .

... O jQuery BBQ fornece um .deparam()método completo , juntamente com os métodos de utilitário de gerenciamento de estado de hash e de análise de fragmentos / consultas e mesclagem de strings / consultas.

Edit: Adicionando Deparam Exemplo:

 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 você quiser usar apenas JavaScript simples, poderá 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 de 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 atualizará seu cache interno de parâmetros sempre que o histórico for alterado.


100

Basta usar duas divisões :

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

Eu estava lendo todas as respostas anteriores e mais completas. Mas acho que esse é o método mais simples e rápido. Você pode verificar este benchmark jsPerf

Para resolver o problema no comentário do Rup, adicione uma divisão condicional alterando a primeira linha para as duas abaixo. Mas a precisão absoluta significa que agora é mais lento que o regexp (consulte 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;
}

Portanto, se você sabe que não encontrará o contra-argumento de Rup, isso vence. Caso contrário, regexp.

Ou se você tem o controle da string de consulta e pode garantir que um valor que você está tentando obter nunca contenha caracteres codificados em URL (tê-los em um valor seria uma má ideia) - você pode usar a seguinte versão um pouco mais simplificada e legível da 1ª opção:

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

7
Muito arrumado! Não vai funcionar, embora se você tiver um valor mais cedo, com um nome de chave que termina com o que você deseja, por exemplo, get('value')em http://the-url?oldvalue=1&value=2.
Rup

3
No entanto, se você souber o nome do parâmetro, esta será a abordagem mais rápida.
Martin Borthiry

Editado: se você apenas testar a halfverdade, isso retornará nulo para um parâmetro vazio como ?param=. Nesse caso, ele deve retornar a cadeia vazia e a verificação half !== undefinedresolve isso.
21414

Legal! Eu fiz um one-liner:function get(param){return decodeURIComponent((location.search.split(param+'=')[1]||'').split('&')[0])}
niutech

Eu tive que mudar a segunda linha para return half !== undefined ? decodeURIComponent(half[1].split('&')[0]) : null;obtê-lo para o trabalho
divillysausages

95

Aqui está minha tentativa de transformar a excelente solução de Andy E em um completo plug-in jQuery:

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

A sintaxe é:

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

Melhor dos dois mundos!


76

Se você está fazendo mais URL manipulação do que simplesmente analisar a querystring, você pode encontrar URI.js útil. É uma biblioteca para manipular URLs - e vem com todos os sinos e assobios. (Desculpe por auto-publicidade aqui)

para converter sua string de consulta em um mapa:

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

(URI.js também "correções" querystrings mau gosto ?&foo&&bar=baz&a ?foo&bar=baz)


// exigido o carregamento do src / URI.fragmentURI.js
JoeB

1
O +1 URI.js é um ótimo plugin. Você também pode fazer o var data = URI.parseQuery('?foo=bar&bar=baz&foo=world');mesmo resultado ( documentos ).
21717 Yarin

62

Eu gosto da solução de Ryan Phelan . Mas não vejo sentido em estender o jQuery para isso? Não há uso da funcionalidade jQuery.

Por outro lado, gosto da função incorporada no Google Chrome: window.location.getParameter.

Então, por que não usar isso? Ok, outros navegadores não têm. Então, vamos criar esta função se ela não existir:

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

Essa função é mais ou menos de Ryan Phelan, mas é diferente: nome claro e sem dependências de outras bibliotecas javascript. Mais sobre esta função no meu blog .


3
Parece que window.location.getParameter () foi removido do Chrome.
precisa saber é o seguinte

54

Aqui está uma maneira rápida de obter um objeto semelhante ao 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();

Para a string de consulta, x=5&y&z=hello&x=6isso retorna o objeto:

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

se você precisar dele como um plugin jQuery, aqui está ele: (function($) { $.extend({ get_query: function (name) { var url = location.href; 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]] = qs[i][1]; } return result; } }); })(jQuery);e use assim:$.get_query()
tim

Obrigado. Eu também acabei usando isso. Eu adicionei isso antes da sua declaração de retorno: if (param) return result [param], dessa maneira eu também posso fazer get_query ('foo') se necessário
sqram

1
Não funciona se você tiver hashes. Por exemplo: test.aspx? Test = t1 # padrão . Retornarei {test: "t1 # default"} e espero {test: "t1"} #
Bogdan M.

@ BogdanM: de fato. location.hrefteria que ser substituído por location.search.
Dan Dascalescu

53

Mantenha-o simples no código JavaScript simples:

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

Chame-o de qualquer lugar no código JavaScript:

var result = qs('someKey');

1
Eu acho que você está fazendo algo semelhante como me, mas acho que a minha abordagem é muito mais simples stackoverflow.com/a/21152762/985454
Qwerty

Deixe-me apresentá-lo (drumroll por favor) window.location.search!
precisa saber é o seguinte

46

Todas essas são ótimas respostas, mas eu precisava de algo um pouco mais robusto e pensei que todos vocês gostariam de ter o que eu criei.

É um método simples de biblioteca que disseca e manipula parâmetros de URL. O método estático possui os seguintes sub-métodos que podem ser chamados no URL do assunto:

  • getHost
  • getPath
  • getHash
  • setHash
  • getParams
  • getQuery
  • setParam
  • getParam
  • hasParam
  • removeParam

Exemplo:

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

44

Do MDN :

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

alert(loadPageVar("name"));

39

Código 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]);
}

Mostre!

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

No meu Mac: test.htm?i=can&has=cheezburgerexibe

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

9
Adoro a sua resposta, especialmente a compacidade do script, mas você provavelmente deve estar usando decodeURIComponent. Veja xkr.us/articles/javascript/encode-compare e stackoverflow.com/questions/619323/…
pluckyglen

39

Eu uso muito expressões regulares, mas não para isso.

Parece-me mais fácil e eficiente ler a string de consulta uma vez no meu aplicativo e criar um objeto a partir de todos os pares de chave / valor, como:

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

Para um URL como http://domain.com?param1=val1&param2=val2você pode obter o valor mais tarde no seu código como search.param1e search.param2.


38
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

5
Essa é uma abordagem interessante, retornando uma matriz contendo valores dos parâmetros especificados. Ele tem pelo menos um problema - a URL não decodifica corretamente os valores e também precisa codificar por URL os nomes dos parâmetros usados ​​na correspondência. Porém, ele funcionará em cadeias de consulta simples em sua forma atual. ps não se esqueça de usar a palavra-chave var ao declarar variáveis para instruções.
Andy E

38

O método jQuery da Roshambo não estava cuidando da URL de decodificação

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

Apenas adicionei esse recurso ao adicionar a declaração de retorno

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

Agora você pode encontrar a essência atualizada:

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

36

Eu gosto deste (retirado de 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;
}

Funciona muito bem para mim.


36

Aqui está minha edição desta excelente resposta - com capacidade adicional de analisar cadeias de caracteres de consulta com chaves sem valores.

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! O parâmetro para essa função na última linha é diferente. É apenas um exemplo de como alguém pode passar um URL arbitrário para ele. Você pode usar a última linha da resposta de Bruno para analisar o URL atual.

Então, o que exatamente mudou? Com os http://sb.com/reg/step1?param=resultados da URL , será o mesmo. Mas, com o URL, http://sb.com/reg/step1?parama solução de Bruno retorna um objeto sem chaves, enquanto a minha retorna um objeto com chave parame undefinedvalor.


34

Eu precisava de um objeto da string de consulta e odeio muito código. Pode não ser o mais robusto do universo, mas são apenas algumas linhas de código.

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

Um URL como this.htm?hello=world&foo=barcriará:

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

4
Arrumado. De acordo com a Mozilla, no entanto, o forEach não funciona no IE7 ou 8 e eu suspeito que isso cairá se não houver uma string de consulta. Uma melhoria mínima que abrangeria mais casos seria decodeURIComponento valor à medida que você a armazena - e provavelmente a chave também, mas é menos provável que você use seqüências estranhas nisso.
Rup

1
Agradável e simples. Não lida com parâmetros de matriz nem, ?a&b&cmas isso é realmente muito legível (e aliás semelhante à minha primeira ideia). Também splité redundante, mas eu tenho peixes de maior desempenho para fritar do que dividir uma sequência de 10 caracteres duas vezes.
Cod3monk3y

1
quando querystring é "? hello = world & one = a = b & two = 2", então quando você pega o valor de 'one', você só obtém a parte antes do primeiro '=' no valor. seu valor deve ser 'a = b', mas você só obtém 'a' porque divide 'one = a = b' em '='. isso é simplesmente buggy. : ((
Shawn Kovac

2
Eu usaria em location.search.substr(1)vez de location.href.split('?')[1]evitar pegar hash ( #anchor) junto com o último parâmetro de consulta.
Mlt

Sim, deixe-me apresentar-lhe também location.search!
precisa saber é o seguinte

32

Aqui está uma versão estendida da versão "Manipular cadeias de consulta no estilo de matriz" de Andy E. Corrigido um bug ( ?key=1&key[]=2&key[]=3; 1é perdido e substituído por [2,3]), fazia algumas pequenas melhorias no desempenho (recodificação de valores, recalculando a posição "[" etc.)) e adicionava várias melhorias (funcionalizado, suporte para ?key=1&key=2, suporte para ;delimitadores) . Eu deixei as variáveis ​​irritantemente curtas, mas adicionei muitos comentários para torná-las legíveis (ah, e eu reutilizei vnas funções locais, desculpe se isso é confuso;).

Ele manipulará a seguinte querystring ...

? test = Olá & pessoa = neek & pessoa [] = jeff & pessoa [] = jim & pessoa [extra] = john & test3 & nocache = 1398914891264

... transformando-o em um objeto que se parece com ...

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

Como você pode ver acima, esta versão lida com algumas medidas de matrizes "malformadas", ou seja, - person=neek&person[]=jeff&person[]=jimou person=neek&person=jeff&person=jimcomo a chave é identificável e válida (pelo menos no NameValueCollection.Add da dotNet ):

Se a chave especificada já existir na instância NameValueCollection de destino, o valor especificado será adicionado à lista de valores separada por vírgula existente no formato "valor1, valor2, valor3".

Parece que o júri está de certa forma pressionado, pois não há especificações. Nesse caso, várias chaves são armazenadas como uma matriz (falsa). Mas observe que eu não processo valores baseados em vírgulas em matrizes.

O código:

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

Para obter os valores da string de consulta, você pode usar esta função "GetParameterValues". Nesse caso, basta passar o nome do parâmetro de agitação da consulta e ele retornará o valor $ (document) .ready (function () {var bid = GetParameterValues ​​('token');}); função GetParameterValues ​​(param) {var url = decodeURIComponent (window.location.href); url = url.slice (url.indexOf ('?') + 1) para (var i = 0; i <comprimento da URL; i ++) {var urlparam = url [i] .split ('='); if (urlparam [0] == param) {retorna urlparam [1]; }}
Mike Clark

1
Eu tenho usado isso por um tempo agora, e tem sido ótimo até agora. Exceto pelo manuseio de matrizes codificadas em url. Usar q = decodeURIComponent(window.location.search.substring(1)),ajuda a fazer isso também.
Vladislav Dimitrov

31

Esta é uma função que criei há um tempo e estou muito feliz com isso. Não diferencia maiúsculas de minúsculas - o que é útil. Além disso, se o QS solicitado não existir, ele retornará uma string vazia.

Eu uso uma versão compactada disso. Estou postando descompactado para os tipos iniciantes para explicar melhor o que está acontecendo.

Tenho certeza de que isso pode ser otimizado ou feito de maneira diferente para funcionar mais rapidamente, mas sempre funcionou muito bem para o que eu preciso.

Aproveitar.

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

Além disso, é melhor optar por decodeURI () ou decodeURIComponent () em vez de unescape (). developer.mozilla.org/pt-BR/docs/Web/JavaScript/Reference/…
Adarsh ​​Konchady

27

Acabamos de lançar o arg.js , um projeto que visa solucionar esse problema de uma vez por todas. Tradicionalmente, tem sido tão difícil, mas agora você pode fazer:

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

ou obter todo o lote:

var params = Arg.all();

e se você se importa com a diferença entre ?query=truee #hash=trueentão pode usar os métodos Arg.query()e Arg.hash().


você me salvou cara .. arg.js é a solução, nenhuma das soluções está obtendo os valores de # no IE 8 .. :( qualquer um que esteja pesquisando o IE8 # obtém do pedido, esta é a solução ..
Dilip Rajkumar

27

O problema com a principal resposta dessa pergunta é que não há parâmetros suportados depois de #, mas às vezes é necessário obter esse valor também.

Modifiquei a resposta para permitir que ele analise também uma string de consulta completa com um sinal de 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;
};

1
Isso é interessante se você precisar, mas não há um padrão para o formato da parte hash AFAIK, portanto, não é justo chamar isso de fraqueza da outra resposta.
Rup

2
Sim eu conheço. Mas, no meu aplicativo, integro a navegação js de terceiros, que possui alguns parâmetros após o sinal de hash.
Ph0en1x

Por exemplo, na página de pesquisa do Google, a consulta de pesquisa é seguida pelo sinal de hash '#'.
etlds

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

E é assim que você pode usar esta função assumindo que a URL seja

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

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

Já existem algumas implementações dessa abordagem aqui. No mínimo, você precisa decodificarUriComponent () os valores do resultado. Isso também pode se comportar mal se você não especificar um valor, por exemplo ?stringtext&stringword=foo.
quer

24

Se você estiver usando o Browserify, poderá usar o urlmódulo no Node.js :

var url = require('url');

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

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

Leitura adicional: URL Node.js v0.12.2 Manual e documentação

EDIT: Você pode usar a interface de URL , que é amplamente adotada em quase todo o novo navegador e, se o código for executado em um navegador antigo, você pode usar um polyfill como este . Aqui está um exemplo de código sobre como usar a interface de URL para obter parâmetros de consulta (também conhecidos como parâmetros de pesquisa)

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

Você também pode usar URLSearchParams para isso, aqui está um exemplo do MDN para fazer isso com 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"

A documentação para a urlAPI do módulo está aqui: nodejs.org/api/url.html
andrezsanchez

Isso é bom para o desenvolvimento do nw.js. O Browserify nem é necessário, pois a maioria dos módulos de nós funciona como em uma janela nw.js. Testei esse código e funciona como um encanto sem nenhuma modificação.
Andrew Grothe

OHH isso é incrível! URLSearchParams funciona perfeitamente. Muito Obrigado!
Baran Emre

1
provavelmente deve ser o melhor votado, sem problemas com funções personalizadas e bibliotecas adicionais. Também parece ser adotado principalmente pelos navegadores de 2019.
TheWhiteLlama
Ao utilizar nosso site, você reconhece que leu e compreendeu nossa Política de Cookies e nossa Política de Privacidade.
Licensed under cc by-sa 3.0 with attribution required.