Capturando parâmetros da URL com JavaScript

(Updated on: )

Atualmente, navegadores modernos dispõem de uma API, exposta através do construtor URLSearchParams, que nos ajuda a trabalhar com o que chamamos de search params. Hoje, vamos utilizar esta ferramenta para entender como capturar parâmetros da URL de forma simples utilizando Vanilla JS.

Digamos que você está desenvolvendo um software de distribuição anúncios. Neste projeto, o usuário irá acessar uma URL, e baseados na mesma, iremos distribuir apenas os anúncios de um cliente específico.

Levando em consideraçao que neste caso, o dado que define um cliente na nossa URL é o parâmetro client, como fariamos para capturar o dado identificador na URL abaixo?

https://ad.io/?i=3s7d1&client=ejhe7a61c52nr2f

Como mencionei acima, temos um construtor que nos ajuda a transformar os dados do search em objeto nativo do JavaScript. Vejamos o exemplo abaixo:

const { search } = window.location;
const params = new URLSearchParams(search);
const clientId = params.get('client'); // => ejhe7a61c52nr2f

Neste exemplo, o resultado na variável clientId seria ejhe7a61c52nr2f. O método get retorna o primeiro valor associado a chave passada como parâmetro.

Lembrando as chaves do objeto URLSearchParams são case sensitive. Ou seja, caso eu tentasse capturar o parâmetro Client da URL acima, o resultado seria null.

Para mais informações sobre o construtor &&URLSearchParams**, e como capturar parâmetros da URL usando JavaScript, clique aqui.

Compartilhe:
Buy Me A Coffee