Como ler os parâmetros da URL em JavaScript?

Em algumas situações, precisamos ler os parâmetros que estão contidas na URL para escrever nosso código. Esses parâmetros também são conhecidos como variáveis do tipo GET. Pensando nisso, resolvi escrever uma função em JavaScript para ler os parâmetros da URL. O código é livre, portanto sinta-se livre para copiar, modificar ou utilizar como quiser:

function getQueryParam (name, query) {
  
  // se o parâmetro query não foi definido pega o parâmetro da URL
  if (!query)
    query = window.location.search
  
  var l = query.length
  var n = '' // nome
  var v = '' // valor
  var t = false
  
  // percorre os caracteres da variavel "query"
  for (var i=0; i<l; i++) {
    var c = query[i]
    
    // caso o caractere seja = passa a armazenar os caracteres como valor
    if (c==='=') {
      t = true
    }
    // caso o caractere seja & ou seja o último caractere
    else if (c==='&' || i===l-1) {
      
      // se for o parâmetro desejado, retorna o valor
      if (n===name) {
        if (i===l-1)
          v += (c === '+') ? ' ' : c

        return decodeURIComponent(v)
      }

      // senão, reinicia as variáveis de controle
      t = false
      n = ''
      v = ''
    }
    // caso a variável não seja igual a interrogação
    else if (i>0 || c!=='?') {
      // armazena como valor
      if (t) {
        // redefine + como espaço
        v += (c === '+') ? ' ' : c
      }
      // armazena como nome
      else {
        n += c
      }
    }
  }
}

Como pegar um valor dos parâmetros da URL:

A seguir, um exemplo simples de como pegar os valores dos parâmetros e definindo assim numa variável. Digamos que estamos acessando o link https://blog.devarthur.com/?s=javascript. Este link realiza uma pesquisa interna no site, mas queremos apenas pegar a palavra que está associada ao parâmetro s em ?s=javascript:

var termoDaBusca = location.getQueryParam('s')

Bem simples, não é mesmo? Caso tenha alguma dúvida ou sugestão, lembre-se de deixar um comentário no final do artigo!

Pegando todos os parâmetros de uma única vez:

Também podemos ler todos os parâmetros da URL de uma só vez com a função getQueryParams(), vejamos como escrever a função de uma forma simples:

function getQueryParams (name, query) {
  var query = location.search.slice(1)
  var partes = query.split('&')
  var data = {}
  
  partes.forEach(function (parte) {
      var chaveValor = parte.split('=')
      data[chaveValor[0]] = chaveValor[1]
  })

  return data 
}

Agora, podemos usar a função para pegar todos os parâmetros. Dessa forma, se estivermos acessando um link como https://exemple.org/?nome=Arthur&sobrenome=Ronconi podemos ter o seguinte código:

var parametros = getQueryParams()

// Imprime o valor de nome no log do sistema
console.log('Nome', parametros['nome'])

// Imprime o valor de sobrenome no log do sistema
console.log('Sobrenome', parametros['sobrenome'])

As funções são flexíveis, portanto podemos passar apenas a query a ser consultada, dessa forma a função nos trás os valores também. Veja o exemplo a seguir:

var query = "?nome=Arthur&sobrenome=Araújo"

// Imprime o valor de sobrenome no log do sistema
console.log(getQueryParam('sobrenome', query))

// Imprime os valores dos parâmetros num array chave/valor
console.log(getQueryParams(query))

Conclusão

Portanto, a utilização das funções getQueryParam() e getQueryParams() em JavaScript torna o processo de ler e extrair parâmetros da URL mais simples e eficiente. Com essas ferramentas, podemos obter facilmente informações relevantes presentes nos links, contribuindo para o desenvolvimento de aplicações mais dinâmicas e interativas. Experimente essas funções em seus projetos e aprimore suas habilidades ao manipular os parâmetros da URL de forma eficaz.