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

Como ler valores de URL capa

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

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

Inscrever-se
Notificar de
guest

0 Comentários
mais antigos
mais recentes Mais votado
Feedbacks embutidos
Ver todos os comentários