Získejte parametry řetězce dotazu pomocí JavaScriptu

Parametry řetězce dotazu byly na straně serveru neuvěřitelně užitečné od doby, kdy se internet rozjel, ale až když se webové aplikace řízené AJAX staly populární, na straně klienta jsme na ně příliš spoléhali. Nejen, že získáváme hodnoty parametrů, ale upravujeme je také dynamicky pomocí History API, takže tyto parametry hrají hlavní roli mimo počáteční načtení stránky.

Vždy jsme byli schopni získat celý řetězec dotazu pomocí window.location.search vlastnost:

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

...ale ve světě setterů, getterů a JSON musí existovat lepší způsob, jak získat hodnoty, než je analýza řetězce, že? Po letech ošklivé analýzy řetězce existuje lepší způsob:URLSearchParams Pojďme se podívat, jak můžeme toto nové API použít k získání hodnot z místa!

// 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 také poskytuje známý Object metody jako keys() , values() a 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 hodně mi připomíná classList API -- velmi jednoduché metody, přesto velmi užitečné.

Záloha jazyka JavaScript

Zatímco URLSearchParams je ideální, ne všechny prohlížeče toto API podporují. K dispozici je polyfill, ale pokud chcete malou funkci pro základní analýzu řetězce dotazu, následuje funkce ukradená ze sady nástrojů A-Frame VR, která analyzuje řetězec dotazu, aby získala požadovanou hodnotu klíče:

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, ' '));
};

Pomocí výše uvedené funkce můžete získat jednotlivé hodnoty parametrů:

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

Každopádně si tuto funkci užijte – zjistíte, že ji potřebujete víc, než si myslíte!