Como ler parâmetros GET via Javascript

Precisa saber como ler parâmetros GET via Javascript? Se sim, está no lugar certo.
Imagine o seguinte cenário: você está navegando na web, se depara com um link cheio de informações estranhas na barra de endereço e se pergunta: “O que diabos é tudo isso?” Bem, esses são os misteriosos parâmetros GET, e neste artigo, vamos desvendar esse enigma juntos.

Então, prepare-se para uma jornada que vai da teoria à prática. Vamos mostrar, passo a passo, como você pode usar JavaScript para extrair e manipular esses parâmetros da URL.

E, se você quiser elevar ainda mais o nível, fique tranquilo pois vamos mostrar algumas técnicas avançadas para lidar com URLs complexas e manter sua aplicação segura. É uma jornada repleta de conhecimento prático, e estamos ansiosos para embarcar nela com você. Vamos começar!

Indo direto ao código

O código mais simples para realizar a tarefa de obter o valor de um parâmetro GET via Javascript é a seguinte:

const parametros = "?parametro1=valor1&parametro2=valor2&parametro3=valor3"
const urlParams = new URLSearchParams(parametros);
const meuParametro = urlParams.get("parametro1");
console.log(meuParametro); // aqui irá imprimir o valor1

Nesse trecho de código, nós fizemos o seguinte:

Na linha 1

const parametros = "?parametro1=valor1&parametro2=valor2&parametro3=valor3"

Nós pegamos todos os parâmetros de uma URL como uma string. Note que nesse exemplo nós estamos trabalhando com os parâmetros de uma URL que esta em uma URL. Se Você desejar ler os parâmetros da URL no navegador, substitua a primeira linha pela seguinte:

const parametros = window.location.search;

Na linha 2

const urlParams = new URLSearchParams(parametros);

Aqui nós instanciamos um objeto do tipo URLSearchParams. É através dele que nós vamos obter todos os parâmetros GET de uma URL de forma estruturada.

Na linha 3

const meuParametro = urlParams.get("parametro1");

Nós aqui finalmente conseguiremos ler o parâmetro que desejamos e guardar seu conteúdo em uma variável ou constante.

O que são parâmetros GET

Para entender o que são parâmetros GET, imagine uma URL como um pacote de presente. No endereço do site que você visita, esse pacote já contém a informação principal, mas e se você quiser adicionar algo extra? É aí que os parâmetros GET entram em cena. Eles são como os adesivos legais que você cola no pacote, cada um com seu nome e função.

Esses “adesivos” são pequenos pedaços de dados que você pode anexar ao final de uma URL, após um ponto de interrogação. Eles são formados por um nome (a chave) e um valor, separados por um sinal de igual. E a mágica acontece quando você solicita a página. O servidor web, ao receber a URL com esses adesivos especiais, entende que você quer algo além da página padrão. É como se você estivesse pedindo ao site para fazer algo específico ou exibir informações personalizadas.

Exemplos de URLs com parâmetros GET

Vamos dar uma espiadinha em algumas URLs na web e descobrir como esses parâmetros GET se encaixam na jogada. Esses exemplos práticos vão te mostrar como os parâmetros GET são usados no mundo real.

Imagine que você está navegando em um site de notícias e encontra uma URL como esta: https://exemplo.com/noticia?id=12345. Neste caso, o parâmetro GET é id, e o valor é 12345. Isso significa que a página está buscando a notícia com o ID 12345 no banco de dados. Você pode pensar nisso como uma forma de instruir o servidor a te mostrar uma notícia específica.

Agora, vamos dar um pulinho na loja online favorita e encontrar uma URL interessante: https://loja.com/produto?sku=789&cor=azul&tamanho=M. Aqui, temos três parâmetros GET diferentes: sku com valor 789, cor com valor azul e tamanho com valor M. Isso permite que a loja saiba qual produto, cor e tamanho você está interessado, tornando sua experiência de compra personalizada.

Vamos para um último exemplo. Se você estiver em um site de receitas, pode se deparar com uma URL como: https://receitasdelicia.com/receita?id=9876&imprimir=true. Aqui, os parâmetros GET id e imprimir estão em ação. id pode indicar qual receita você deseja ver, enquanto imprimir define se você quer uma versão imprimível da receita (com valor true). Essa é uma maneira prática de customizar sua experiência de culinária online.

Solução Vanilla

🤓 O que quer dizer “Solução Vanilla” ?

No contexto da programação, “solução vanilla” se refere a uma abordagem ou implementação de um problema ou tarefa usando apenas recursos e linguagem de programação básicos e nativos, sem a dependência de bibliotecas ou frameworks externos.

Essa abordagem valoriza a simplicidade e a compreensão direta do código, muitas vezes resultando em uma solução mais enxuta e eficiente, embora possa exigir mais esforço de desenvolvimento manual. A expressão “vanilla” sugere a ideia de algo puro e simples, sem adições ou complexidades desnecessárias.

Então, você está pronto para ler parâmetros GET sem precisar de bibliotecas chiques? Ótimo, porque agora vamos te mostrar como fazer isso do jeito raiz, com JavaScript puro. Não vai ser simples, então se prepare para o trabalho 😥

Imagine que você está em um site que tem uma URL assim: https://exemplo.com/pagina?nome=Joao&id=42.

Primeiro, você pode usar a propriedade window.location.search para acessar a parte da URL após o ponto de interrogação. Isso seria algo como ?nome=Joao&id=42. Depois, com um pouco de criatividade, você pode usar o método split para separar os parâmetros e seus valores em um array.

Então, imagine que você tenha isso: const parametros = window.location.search.substring(1).split('&'). Agora, parametros será uma lista com os pares de parâmetros, como ["nome=Joao", "id=42"]

Exemplo de leitura de parâmetros GET via Javascript sem bibliotecas

Vamos supor que temos a seguinte URL:

https://site.com/pagina?nome=Ana&idade=28&cidade=SaoPaulo

Com podemos ler os parâmetros:

// Obtendo a URL atual
const urlAtual = window.location.href;

// Encontrando a posição do ponto de interrogação na URL
const indiceInterrogacao = urlAtual.indexOf('?');

// Verificando se há parâmetros na URL
if (indiceInterrogacao !== -1) {
  // Extraindo a parte da URL após o ponto de interrogação
  const parametrosString = urlAtual.substring(indiceInterrogacao + 1);

  // Dividindo a string de parâmetros em um array usando o caractere "&" como separador
  const parametrosArray = parametrosString.split('&');

  // Criando um objeto para armazenar os parâmetros
  const parametros = {};

  // Iterando sobre o array de parâmetros
  parametrosArray.forEach(parametro => {
    // Dividindo cada parâmetro em nome e valor usando o caractere "=" como separador
    const [nome, valor] = parametro.split('=');

    // Armazenando o parâmetro no objeto
    parametros[nome] = valor;
  });

  // Agora você tem acesso aos parâmetros e seus valores
  console.log('Nome:', parametros.nome);
  console.log('Idade:', parametros.idade);
  console.log('Cidade:', parametros.cidade);
} else {
  console.log('Não foram encontrados parâmetros na URL.');
}

Limitações dessa abordagem

Um dos pequenos contratempos é que essa abordagem nos dá uma lista de parâmetros e valores, mas eles ainda estão meio bagunçados. Você precisa trabalhar um pouco mais para separar os nomes dos valores. Não é um grande problema, mas às vezes pode te levar a erros.

Outra coisa a ter em mente é que, se você não souber exatamente quais parâmetros esperar, fica um pouco complicado. Inegavelmente, às vezes um pouquinho de organização pode fazer falta.

E, por último, essa abordagem é ótima para URLs simples e diretas. Mas se você se deparar com URLs mega complexas, com parâmetros aninhados e coisas do tipo, as coisas podem começar a ficar um pouco confusas.

Usando a Biblioteca URLSearchParams

Se você quer passar longe daquele método de JavaScript puro para acessar parâmetros GET e quer algo mais moderno, então a URLSearchParams pode ser o sua nova melhor amiga.

Ela é um objeto no JavaScript que torna a vida mais fácil quando você precisa lidar com esses pedacinhos de informação na URL. Ele não só acessa esses parâmetros de uma maneira elegante, como também te permite manipular eles.

Como criar uma instância de URLSearchParams

Para começar, você só precisa criar uma instância dessa lib. Tipo assim: const params = new URLSearchParams(window.location.search). Pronto!

Agora, params está pronto para agir. Você pode usar o método .get('nome-do-parametro') para pegar o valor de um parâmetro específico, ou até mesmo o .getAll('nome-do-parametro') se tiver múltiplos valores.

Exemplo de leitura de parâmetros GET via Javascript usando URLSearchParams

Agora, vamos ler a seguinte URL:

https://site.com/pagina?nome=Pedro&idade=18&cidade=RioDeJaneiro

Perceba nas linhas abaixo como o uso da URLSearchParams deixa tudo mais fácil:

// Criando uma instância do URLSearchParams com a URL atual
const params = new URLSearchParams(window.location.search);

// Acessando os parâmetros
const nome = params.get('nome');
const idade = params.get('idade');
const cidade = params.get('cidade');

// Exibindo os valores dos parâmetros
console.log('Nome:', nome);
console.log('Idade:', idade);
console.log('Cidade:', cidade);

Suporte dos navegadores a biblioteca URLSearchParams

A boa notícia é que a maioria dos navegadores modernos, como o Chrome, o Firefox, o Edge e o Safari, oferece suporte para a função URLSearchParams. Isso significa que você pode usá-la tranquilamente sem se preocupar com problemas de compatibilidade.

Então, se você está preocupado com a compatibilidade, não precisa se estressar. A função URLSearchParams está aí para te ajudar a navegar tranquilamente pela web moderna, independentemente do navegador que seus usuários escolherem. 🌐🚀

Lidando com URLs complexas

Às vezes, você pode encontrar URLs tão complexas quanto um quebra-cabeça. Mas calma, com a URLSearchParams conseguimos lidar com todos os problemas mais comuns.

URLs longas

Suponha que você tenha uma URL como esta:

https://site.com/produtos?categoria=eletronicos&marca=samsung&preco=500-1000&resolucao=4k&tamanho=55&frete=gratis&cor=preto&avaliacao=5&estoque=disponivel&desconto=15&garantia=1-ano&prazo=entrega-rapida&tipo=smart-tv&loja=loja1&cupom=desconto123&rating=4.5&destaque=true&condicao=usado

Essa URL está cheia de parâmetros, certo? Mas com o “URLSearchParams”, você pode simplificar isso em um piscar de olhos. Aqui está um código de exemplo em JavaScript:

// Criando uma instância do URLSearchParams com a URL
const params = new URLSearchParams('categoria=eletronicos&marca=samsung&preco=500-1000&resolucao=4k&tamanho=55&frete=gratis&cor=preto&avaliacao=5&estoque=disponivel&desconto=15&garantia=1-ano&prazo=entrega-rapida&tipo=smart-tv&loja=loja1&cupom=desconto123&rating=4.5&destaque=true&condicao=usado');

// Acessando os parâmetros
const categoria = params.get('categoria');
const marca = params.get('marca');
const preco = params.get('preco');
const resolucao = params.get('resolucao');
const tamanho = params.get('tamanho');
const frete = params.get('frete');
const cor = params.get('cor');
const avaliacao = params.get('avaliacao');
const estoque = params.get('estoque');
const desconto = params.get('desconto');
const garantia = params.get('garantia');
const prazo = params.get('prazo');
const tipo = params.get('tipo');
const loja = params.get('loja');
const cupom = params.get('cupom');
const rating = params.get('rating');
const destaque = params.get('destaque');
const condicao = params.get('condicao');

// Exibindo os valores dos parâmetros
console.log('Categoria:', categoria);
console.log('Marca:', marca);
console.log('Preço:', preco);
console.log('Resolução:', resolucao);
console.log('Tamanho:', tamanho);
console.log('Frete:', frete);
console.log('Cor:', cor);
console.log('Avaliação:', avaliacao);
console.log('Estoque:', estoque);
console.log('Desconto:', desconto);
console.log('Garantia:', garantia);
console.log('Prazo:', prazo);
console.log('Tipo:', tipo);
console.log('Loja:', loja);
console.log('Cupom:', cupom);
console.log('Rating:', rating);
console.log('Destaque:', destaque);
console.log('Condição:', condicao);

URLs com valores repetidos

Agora, vamos supor que você tenha uma URL com parâmetros repetidos:

https://site.com/produtos?categoria=eletronicos&marca=samsung&marca=lg&marca=sony&preco=500-1000&loja=loja1&loja=loja2&loja=loja3

Nesta URL, você tem parâmetros com valores repetidos, como “marca” e “loja”. Aqui está um código de exemplo em JavaScript para lidar com isso usando o “URLSearchParams”:

// Criando uma instância do URLSearchParams
const params = new URLSearchParams(window.location.search);

// Acessando os parâmetros com valores repetidos
const categoria = params.get('categoria');
const marcas = params.getAll('marca'); // Usamos getAll para obter todos os valores de "marca"
const preco = params.get('preco');
const lojas = params.getAll('loja'); // Também usamos getAll para obter todos os valores de "loja"

// Agora você tem todos os valores dos parâmetros, incluindo os repetidos!
console.log('Categoria:', categoria);
console.log('Marcas:', marcas);
console.log('Preço:', preco);
console.log('Lojas:', lojas);

URLs com parâmetros aninhados

Agora vamos de parâmetros aninhados:

https://site.com/pedido?cliente[nome]=João&cliente[email]=joao@email.com&produto[id]=123&produto[nome]=Camiseta&produto[preco]=25

Nesta URL, você tem parâmetros aninhados, como “cliente” e “produto”. Cada um deles contém subparâmetros, como “nome”, “email” e assim por diante. Aqui está um código de exemplo em JavaScript para lidar com isso usando o “URLSearchParams”:

// Criando uma instância do URLSearchParams
const params = new URLSearchParams(window.location.search);

// Acessando os parâmetros aninhados
const clienteNome = params.get('cliente[nome]');
const clienteEmail = params.get('cliente[email]');
const produtoId = params.get('produto[id]');
const produtoNome = params.get('produto[nome]');
const produtoPreco = params.get('produto[preco]');

// Agora você tem acesso aos parâmetros aninhados e seus valores!
console.log('Nome do Cliente:', clienteNome);
console.log('Email do Cliente:', clienteEmail);
console.log('ID do Produto:', produtoId);
console.log('Nome do Produto:', produtoNome);
console.log('Preço do Produto:', produtoPreco);

Conclusão

Na jornada da web, é essencial dominar as ferramentas certas, e uma delas é a função URLSearchParams. Felizmente, a boa notícia é que a maioria dos navegadores modernos abraça essa função de braços abertos. Isso significa que você pode usá-la tranquilamente, sem se preocupar com problemas de compatibilidade.

Essa função faz a leitura de parâmetros de URL parecer um passeio no parque. Seja você um desenvolvedor experiente ou um novato curioso, o URLSearchParams simplifica o processo de acessar e manipular informações contidas nas URLs.

Então, da próxima vez que se deparar com uma URL repleta de parâmetros, lembre-se da função URLSearchParams, seu aliado confiável na jornada de desenvolvimento web.

Recursos Adicionais:

• Documentação da Mozilla sobre a URLSearchParams
• Régua de compatibilidade da URLSearchParams no Can I Use
• Debate sobre leitura de parâmetros GET no Stackoverflow (em Inglês)