Quando acesso uma página, por exemplo
/item?tipo=1&nome=po%C3%A7%C3%A3o%20de%20cura
Como faço para pegar esses valores da URL, decodificando apropriadamente?
Para retirar informação do url você pode criar um objecto com pares de chave:valor
de cada um dos parametros do url.
Neste caso, e uma vêz que o separador de parametros é o simbolo &
os valores aqui presentes são:
tipo=1
nome=po%C3%A7%C3%A3o%20de%20cura
// "poção de cura" em versão está codificada para evitar caracteres não compatíveis com url, e evitar espaços brancos.
Assim, dependendo de que biblioteca você utiliza aqui ficam alguns exemplos:
Javascript simples:
function queryObj() {
var result = {}, keyValuePairs = location.search.slice(1).split("&");
keyValuePairs.forEach(function(keyValuePair) {
keyValuePair = keyValuePair.split('=');
result[decodeURIComponent(keyValuePair[0])] = decodeURIComponent(keyValuePair[1]) || '';
});
return result;
}
var myParam = queryObj();
console.log(myParam);
Isto dá: Object {tipo: "1", nome: "poção de cura"}
Note:
?
, usei o método splice()
para remover o primeiro caracter da string. No caso de estar a usar uma versão antiga do IE, e não browsers que supportem o ECMAScript5, use esta versão, em vêz de forEach()
:
for (var i = 0; i < keyValuePairs.length; i++) {
keyValuePairs[i] = keyValuePairs[i].split('=');
result[decodeURIComponent(keyValuePairs[i][0])] = decodeURIComponent(keyValuePair[1] || '');
};
Usando uma biblioteca como Mootools, fica mais fácil. assim só é preciso:
var myParam = window.location.search.slice(1).parseQueryString();
//retorna também: Object {tipo: "1", nome: "poção de cura"}
Você pode utilizar um plugin jQuery: jQuery plugin Purl
Exemplo de uso:
1º Importar a bibiloteca:
<script type="text/javascript" src="<caminho>/purl.js"></script>
Para encontrar a bibliloteca basta copiar o código purl.js,criar um arquivo com o nome purl.js e colar;
2º Depois de importar a biblioteca você pode escolher fazer de duas maneiras:
Utilizando jQuery
var url = $.url('http://url.com.br/item?tipo=1&nome=po%C3%A7%C3%A3o%20de%20cura');
var tipo = url.param('tipo'); // valor do tipo = "1"
var nome = url.param('nome'); // valor do nome = "po%C3%A7%C3%A3o%20de%20cura"
Sem utilização jQuery
var url = purl('http://url.com.br/item?tipo=1&nome=po%C3%A7%C3%A3o%20de%20cura');
var tipo = url.param('tipo'); // valor do tipo = "1"
var nome = url.param('nome'); // valor do nome = "po%C3%A7%C3%A3o%20de%20cura"
Você pode utilizar o seguinte método:
// parametro `a` opcional, ex: `tipo=1&nome=espada#custo=0`
// o valor padrão é da URL atual
function GetQueryString(a)
{
a = a || window.location.search.substr(1).split('&').concat(window.location.hash.substr(1).split("&"));
if (typeof a === "string")
a = a.split("#").join("&").split("&");
// se não há valores, retorna um objeto vazio
if (!a) return {};
var b = {};
for (var i = 0; i < a.length; ++i)
{
// obtem array com chave/valor
var p = a[i].split('=');
// se não houver valor, ignora o parametro
if (p.length != 2) continue;
// adiciona a propriedade chave ao objeto de retorno
// com o valor decodificado, substituindo `+` por ` `
// para aceitar URLs codificadas com `+` ao invés de `%20`
b[p[0]] = decodeURIComponent(p[1].replace(/\+/g, " "));
}
// retorna o objeto criado
return b;
}
// uso
var qs = GetQueryString();
Desta forma sua variável qs
na URL
/item?tipo=1&nome=po%C3%A7%C3%A3o%20de%20cura#tipo=2
será
qs["tipo"]; // 2
qs["nome"]; // poção de cura
qs["nothere"]; // undefined (objeto)
Vale observar que neste método se houver mais de um parâmetro com o mesmo nome, somente o ultimo será considerado.
Abrindo o código do Google eu encontrei
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
}
Esta minificado, mas é compreensível.
O código procura por ?
e #
que é o ponto da URL em que os parâmetros aparecem. E para cada parâmetro eles dividem pelo =
utilizando indexOf
. Se o parâmetro tem valor eles adicionam ao objeto. No final o código cuida da decodificação e substitui +
por .
Uma outra opção seria utilizar Regex
para extrair os valores
function queryString(parameter) {
var loc = location.search.substring(1, location.search.length);
var param_value = false;
var params = loc.split("&");
for (i=0; i<params.length;i++) {
param_name = params[i].substring(0,params[i].indexOf('='));
if (param_name == parameter) {
param_value = params[i].substring(params[i].indexOf('=')+1)
}
}
if (param_value) {
return param_value;
}
else {
return false;
}
}
uso
var id = queryString("id");
Se quiser usar uma framework, como jquery por exemplo, pode usar um plugin como este:
https://github.com/promatik/jQuery-Dynamic-URL (exemplo de utilização aqui)
Permite-lhe fazer por exemplo:
$.getVars();
> {"tipo" : 1, "nome" : "poção de cura"}
$.getVars().nome;
> "poção de cura"
E permite até alterar a barra de endereço adicionando os seus próprios parâmetros em runtime:
$.pushVar("genero", "medicina");
$.popVar("tipo");
O url ficaria:
/item?nome=po%C3%A7%C3%A3o%20de%20cura&genero=medicina
As funções apresentadas anteriormente tem um desempenho ruim. Eu implementei duas funções para isto que são respectivamente 35% e 120% mais rápidas, elas fazem parte da biblioteca Ideal.js:
// URL: http://exemplo.org/?nome=Arthur&sobrenome=Araújo
console.log(location.getQueryParam('sobrenome'))
// ou pode pegar todos os parâmentros de uma só vez:
var params = location.getQueryParams()
console.log('Nome', params['nome'])
console.log('Sobrenome', params['sobrenome'])
Função 1 - location.getQueryParam():
window.location.getQueryParam = function(name, query) {
if (!query) {
query = window.location.search
}
var l = query.length
var n = '' // name
var v = '' // value
var t = false
for(var i=0; i<l; i++) {
var c = query[i]
if (c==='=') {
t = true
}
else if (c==='&' || i===l-1) {
if (n==name) {
return decodeURIComponent(v)
}
t = false
n = ''
v = ''
}
else if (i>0 || c!=='?') {
if (t) {
if (c==='+') {
c = ' '
}
v += c
}
else {
n += c
}
}
}
}
Função 2 - location.getQueryParams():
window.location.getQueryParams = function(query) {
if (!query) {
query = window.location.search
}
var l = query.length
var q = {} // query
var n = '' // name
var v = '' // value
var t = false
for(var i=0; i<l; i++) {
var c = query[i]
if (c==='=') {
t = true
}
else if (c==='&' || i===l-1) {
t = false
q[n] = decodeURIComponent(v)
n = ''
v = ''
}
else if (i>0 || c!=='?') {
if (t) {
if (c==='+') {
c = ' '
}
v += c
}
else {
n += c
}
}
}
return q
}
Você pode ver a diferença do desempenho no meu teste de caso.
Procurei esta mesma questão no fórum em inglês, e neste tópico, tem uma solução muito simples por meio de um objeto chamado URLSearchParams
A utilização é a seguinte:
const urlParams = new URLSearchParams(window.location.search);
const myParam = urlParams.get('myParam');
console.log(myParam)
O objeto é instanciado com o window.location.search, que entrega tudo após a interrogação da URL
E por fim utilizando o método get pelo nome do parâmetro como argumento, você consegue receber o valor do mesmo
A ressalva é que com esta abordagem parâmetros com chave como: filters[a], não entregam o valor correto através do get
Porém para grande parte dos casos, creio que esta é uma excelente forma de resgatar os valores dos mesmos
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;
}
Usei assim:
getUrlVars()["tipo"]
retorna "1"
getUrlVars()["nome"]
retorna "po%C3%A7%C3%A3o%20de%20cura"
Acredito que a maioria das pessoas que procuram a resposta dessa pergunta estarão em um contexto de um web browser.
Mas para quem estiver utilizando node.js vale lembrar que existe uma função nativa para isso:
> querystring.parse('tipo=1&nome=po%C3%A7%C3%A3o%20de%20cura')
{ tipo: '1', nome: 'poção de cura' }
querystring = (window.location.href).substring( window.location.href).search("novaos.php?")+11, 100);
Supondo que o nome da minha pagina é "novaos.php". É só reindcrever de acordo com a sua.