16

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?

10 Respostas 10

8

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:

  • em javascript é preciso descodificar a string usando decodeURIComponent()
  • uma vez que a query string começa com ?, 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"}
0
5

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

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.


Método do Google

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

4
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");
3

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
3

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.

3

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

2
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"
1

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' }
-2

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.

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .