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?
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?
Respostas:
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.
http://www.mysite.com/index.php?x=x1&x=x2&x=x3
o valor do campo x
é ambíguo.
?mykey=0&m.+key=1
consulta de , a chamada getParameterByName("m.+key")
retornaria em 0
vez de 1
. Você precisa escapar dos metacaracteres da expressão regular name
antes 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.search
vez de location.href
. Uma resposta com mais de 400 votos positivos deve levar em conta esses detalhes.
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=value
pares. 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.
<script>var urlParams = <?php echo json_encode($_GET, JSON_HEX_TAG);?>;</script>
Muito mais simples!
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]);
}
}
})();
window.location.hash
propriedade, que é separada da window.location.search
propriedade. Se o hash for alterado, não afetará a string de consulta.
;
é um delimitador legal para key=value
pares GET . É raro, mas leva 5 segundos para implementar.
?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 / "/" / "?" )
.
while(match = search.exec(query))
comwhile((match = search.exec(query)) !== null)
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;
}, {}
)
: {}
};
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)
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¶m2=val"
//Update the url/querystring in the browser's location bar with the $.QueryString object
history.replaceState({}, '', "?" + $.param($.QueryString));
//-or-
history.pushState({}, '', "?" + $.param($.QueryString));
Código de preparação: declaração de métodos
var qs = window.GetQueryString(query);
var search = qs["q"];
var value = qs["value"];
var undef = qs["undefinedstring"];
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
unescape
seja 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.
window.location
faz com que qualquer desempenho se preocupe, já que o cliente que navega para o URL é muito, muito mais caro.
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/
return match && decodeURIComponent(match[1].replace(/\+/g, ' '));
.
null
se 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 false
se o parâmetro não estiver lá.
new
prefixo ao criar o regex:var match = new RegExp('...
.replace('\u200E', '')
var results = new RegExp('[\\?&]' + name + '=([^&#/]*)').exec(url);
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 .searchParams
propriedade 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.
.get
em vez de apenas.
slice(1)
de .search
, você pode usá-lo diretamente. URLSearchParams pode lidar com os principais ?
.
URLSearchParams
não é bom porque não retorna os valores reais dos parâmetros de um URL.
new URL('https://example.com?foo=1&bar=2')
não está funcionando para url androidfile:///android_asset/...
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 URI
diretamente, 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'
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
"?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"
Para acessar diferentes partes de um URL, use location.(search|hash)
var queryDict = {};
location.search.substr(1).split("&").forEach(function(item) {queryDict[item.split("=")[0]] = item.split("=")[1]})
"?a=1&b=0&c=3&d&e&a=5"
> queryDict
a: "5"
b: "0"
c: "3"
d: undefined
e: undefined
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]]})
qd.key[index]
ouqd[key][index]
> qd
a: ["1", "5"]
b: ["0"]
c: ["3"]
d: [undefined]
e: [undefined]
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"]
* !!! 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(...)
array.forEach()
injetando certo código no início do seu script. consulte Polyfill developer.mozilla.org/pt-BR/docs/Web/JavaScript/Reference/…
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] })
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 .
0
? Claro, eu poderia usar rigorosa verificação de igualdade, mas não deveria null
?
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.
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;
get('value')
em http://the-url?oldvalue=1&value=2
.
half
verdade, isso retornará nulo para um parâmetro vazio como ?param=
. Nesse caso, ele deve retornar a cadeia vazia e a verificação half !== undefined
resolve isso.
function get(param){return decodeURIComponent((location.search.split(param+'=')[1]||'').split('&')[0])}
return half !== undefined ? decodeURIComponent(half[1].split('&')[0]) : null;
obtê-lo para o trabalho
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!
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
)
var data = URI.parseQuery('?foo=bar&bar=baz&foo=world');
mesmo resultado ( documentos ).
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 .
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=6
isso retorna o objeto:
{
x: "6",
y: undefined,
z: "hello"
}
(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()
location.href
teria que ser substituído por location.search
.
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');
window.location.search
!
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:
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>');
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=cheezburger
exibe
0:can
1:cheezburger
i:can
has:cheezburger
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¶m2=val2
você pode obter o valor mais tarde no seu código como search.param1
e 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
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;
}
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.
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?param
a solução de Bruno retorna um objeto sem chaves, enquanto a minha retorna um objeto com chave param
e undefined
valor.
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=bar
criará:
{hello:'world', foo:'bar'}
decodeURIComponent
o valor à medida que você a armazena - e provavelmente a chave também, mas é menos provável que você use seqüências estranhas nisso.
?a&b&c
mas 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.
location.search.substr(1)
vez de location.href.split('?')[1]
evitar pegar hash ( #anchor
) junto com o último parâmetro de consulta.
location.search
!
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 v
nas 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[]=jim
ou person=neek&person=jeff&person=jim
como 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;
};
q = decodeURIComponent(window.location.search.substring(1)),
ajuda a fazer isso também.
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);
}
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=true
e #hash=true
então pode usar os métodos Arg.query()
e Arg.hash()
.
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;
};
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');
?stringtext&stringword=foo
.
Se você estiver usando o Browserify, poderá usar o url
mó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"
url
API do módulo está aqui: nodejs.org/api/url.html