Como ler query string da URL em JavaScript (Exemplos práticos)

Se você precisa pegar um parâmetro GET da URL, também chamado de query string, neste tutorial você terá alguns exemplos rápidos.

Obtendo um parâmetro GET com URLSearchParams

Suponhamos que sua URL seja: https://website.com/blog?page=1 e queremos obter o valor do parâmetro "page". Utilizamos a interface URLSearchParams com location.search, que corresponde à "?page=1", mas você também pode usar outra composição de query string no lugar.

Nota: Apesar de ser amplamente suportado, a interface URLSearchParams pode ainda não funcionar em alguns navegadores antigos. Para isso, veja a função regex mais abaixo.

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

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

Outros métodos da interface URLSearchParams

Além de obter o valor de um parâmetro, você pode verificar se um parâmetro existe, adicionar ou remover parâmetros, iterar todos os parâmetros, etc. Caso queira, aqui está a lista completa de todos os métodos da interface URLSearchParams.

Para fins de exemplo, aqui vão alguns dos principais métodos:

// Exemplo: https://website.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

A interface URLSearchParams pode ser uma solução muito mais simples, e eu a recomendo, mas apesar disso ela não é compatível com 100% dos navegadores, por isso, deixo aqui também um fallback em regex, proposto 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, ' '));
}