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.