Como ler valores de URL em JavaScript

Neste artigo você vai aprender como ler valores de URL com JavaScript puro, a famosa query string que é utilizada como parâmetro de URL

Fala programador(a), beleza? Neste artigo vamos aprender a como extrair parâmetros de URL com JavaScript puro!

Há duas abordagens para esta situação, utilizar o URLSearchParams, e utilizar o seu método get

Formação Recomendada

Formação Claude Code

Domine Claude Code do absoluto zero até o avançado

• 116 aulas
• 4 projetos
• 9h 23min

Conhecer formação

Veja um exemplo:

const urlParams = new URLSearchParams(window.location.search);

const param = urlParams.get('idade');

console.log(param); // 29

Aqui neste caso, criei uma URL que termina com ?idade=29, percebam como consigo extrair o parâmetro de modo fácil

Uma vez que o window.location.search nos da tudo que é enviado pelo URL após o ?

E o método get extrai o valor de um parâmetro específico, para o caso da URL conter mais de um parâmetro

Outra possibilidade é por meio de regex, veja uma função que conseguimos extrair o parâmetro de uma URL:

function getParameterByName(name, url) {
    if (!url) url = window.location.href;
    name = name.replace(/[\[\]]/g, '\\$&');
    var regex = new RegExp('[?&]' + name + '(=([^&#]*)|&|#|$)'),
        results = regex.exec(url);
    if (!results) return null;
    if (!results[2]) return '';
    return decodeURIComponent(results[2].replace(/\+/g, ' '));
}

console.log(getParameterByName('idade')); // 29

Aqui a URL é opcional, podemos resgatar diretamente pelo nome do parâmetro, e novamente temos o resultado do exemplo anterior

A vantagem deste para a primeira alternativa, é que ele entende os parâmetros com chave e valor, já o URLSearchParams não

Porém se a utilização for simples, vá de URLSearchParams, com certeza deixará seu código mais simples e de fácil manutenção

Conclusão

Neste artigo vimos como ler valores de URL em JavaScript

Utilizamos duas abordagens distintas, a primeira é um objeto do JavaScript chamado URLSearchParams, que com o método get nos dá o valor do parâmetro

E a segunda foi uma função que utiliza regex para extrair os valores dos parâmetros que foram inseridos na URL

Confira também nosso catálogo de cursos gratuitos, com aulas semanais no YouTube