JavaScript: Como Ler Query String Da URL (Guia Prático)

Hoje vamos aprender a ler query string da URL com a linguagem JavaScript através de um passo a passo simples que qualquer pessoa consegue entender.

Em diversas situações podemos precisar pegar um parâmetro GET da URL, também conhecido como query string e hoje você vai aprender a fazer isso com exemplos práticos.

Portanto, leia esse artigo até o final para entender exatamente como essa técnica funciona.

Agora chega de enrolação e vamos para prática.

Capturando um parâmetro GET com URLSearchParams

Primeiramente vamos entender como funciona uma estrutura de URL desse tipo, por exemplo:

Vamos supor que a sua URL seja: https://seusite.com/blog?page=1

E neste caso precisamos obter o valor do parâmetro “page”. Para isso utilizamos a interface URLSearchParams com location.search.

Que corresponde a “?page=1”, porém você também pode utilizar outra composição de query string no lugar.

Observação: Apesar de ser amplamente suportado, a interface URLSearchParams pode não funciona em alguns navegadores antigos.

// Passamos a querystring atual através de location.search
// Como exemplo, temos: https://seusite.com/blog?page=1
const urlParams = new URLSearchParams(location.search);

console.log(urlParams.get('page')); // 1

O retorno do código acima será: 1

Outros métodos da interface URLSearchParams

Existe outros métodos bem legais que além de obter o valor de um parâmetro, você também pode verificar se um parâmetro especifico existe, adicionar ou remover parâmetros etc.

Caso queira dar uma conferida, vou deixar aqui a lista completa de todos os métodos da interface URLSearchParams.

Vou deixar aqui alguns dos principais métodos:

// Exemplo: https://seusite.com/blog?page=1
const urlParams = new URLSearchParams(location.search);

// Verifica se o parâmetro existe
urlParams.has('page'); // true

// Imprime todos os parâmetros como na forma original, sem o "?" na frente
urlParams.toString(); // page=1

// Adiciona um parâmetro com chave e valor especificados
urlParams.append('key', 'val'); // Resultado: page=1&key=val

// Remove um parâmetro
urlParams.delete('key'); // Resultado: page=1

Obtendo um parâmetro GET com Regex

Geralmente vamos utilizar a interface URLSearchParams para maioria dos casos onde precisamos capturar a query string de uma URL.

Porém, nem todos os navegadores são compatíveis com esse tipo de técnica, neste caso, vou deixar aqui também um fallback em regex, criado por um usuário do StackOverflow chamado James:

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

Conclusão: Query String JavaScript

Neste artigo vimos alguns exemplos de capturar query string da URL com a linguagem JavaScript com exemplos práticos que vão te ajudar bastante em diversas situações.

Bem legal esse conteúdo né?

O segredo para alcançar o topo da sua carreira na área da tecnologia está a um clique de distância. Toque no botão abaixo agora mesmo e mergulhe em mais de 1400 cursos completos, todos com certificados de peso. 

Enfim, espero que tenha gostado deste conteúdo pois preparamos ele para realmente te ajudar em seus estudos sobre desenvolvimento de software.

Eu vou ficando por aqui…

Até a próxima e um forte abraço!!