Obter parâmetros da string de consulta com JavaScript

Os parâmetros de string de consulta têm sido incrivelmente úteis no lado do servidor desde que a Internet decolou,
mas foi somente quando os aplicativos da Web orientados por AJAX se tornaram populares que passamos a confiar demais neles no lado do cliente;
Não apenas pegamos os valores dos parâmetros, mas também os modificamos dinamicamente com a função History API,
portanto, esses parâmetros desempenham um papel importante fora do carregamento inicial da página.

Sempre conseguimos obter a string de consulta completa por meio do window.location.search propriedade:

console.log(window.location.search);
// "?post=1234&action=edit"

…mas em um mundo de setters, getters e JSON, deve haver uma maneira melhor de obter valores do que analisar uma string, certo?
Depois de anos de análise feia de strings, há uma maneira melhor: URLSearchParams Vamos dar uma olhada em como podemos
usar essa nova API para obter valores do local!

// Assuming "?post=1234&action=edit"

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

console.log(urlParams.has('post')); // true
console.log(urlParams.get('action')); // "edit"
console.log(urlParams.getAll('action')); // ["edit"]
console.log(urlParams.toString()); // "?post=1234&action=edit"
console.log(urlParams.append('active', '1')); // "?post=1234&action=edit&active=1"

URLSearchParams também fornece informações familiares ao Object como o keys(), values(),
e entries():

var keys = urlParams.keys();
for(key of keys) { 
  console.log(key); 
}
// post
// action

var entries = urlParams.entries();
for(pair of entries) { 
  console.log(pair[0], pair[1]); 
}

URLSearchParams me lembra muito o
classList API — métodos muito simples, mas
muito úteis

JavaScript Fallback

Enquanto URLSearchParams seja ideal, nem todos os navegadores são compatíveis com essa API. Existe uma polyfill disponível mas se o senhor quiser uma função minúscula para analisar a string de consulta básica, o seguinte é uma função roubada do kit de ferramentas A-Frame VR que analisa a string de consulta para obter o valor da chave que o senhor deseja:

function getUrlParameter(name) {
    name = name.replace(/[\[]/, '\\[').replace(/[\]]/, '\\]');
    var regex = new RegExp('[\\?&]' + name + '=([^&#]*)');
    var results = regex.exec(location.search);
    return results === null ? '' : decodeURIComponent(results[1].replace(/\+/g, ' '));
};

Com a função acima, o senhor pode obter valores de parâmetros individuais:

getUrlParameter('post'); // "1234"
getUrlParameter('action'); // "edit"

De qualquer forma, aproveite essa função – o senhor vai acabar precisando dela mais do que imagina!