Get Query String értékek JavaScriptben

Időbélyeg: 21. július 2022. 12:22

Az URL-ben a lekérdezési karakterláncok értékei gyakran adnak információt a kérésről, például a keresés paramétereit vagy egy használt objektum azonosítóját. Ha az üzleti vagy kérési logikák bármelyikét a kezelőfelület kezeli, fontos tudni, hogyan lehet lekérni a lekérdezési karakterlánc értékeit az URL-ből. Számos módja van ennek elérésére, ezek közül néhányat itt fogunk látni.

URLSearchParams

A URLSearchParams Az interfészt az IE 11 kivételével az összes főbb böngészőverzió támogatja. Úgy működik, hogy elemzi az URL lekérdezési karakterláncát, és lehetőséget biztosít az értékek elérésére. Például:

let params = new URLSearchParams('q=node&page=2');
params.get('q'); 
params.get('page');

Ennek a felületnek az egyik hátránya, hogy csak az URL lekérdezési karakterláncát kell átadnia. Ha az aktuális böngésző URL-címével dolgozik, ez könnyen megtehető, mivel csak átadhatja window.location.search. Ha bármilyen más URL-lel dolgozik, akkor külön kell elemeznie és át kell adnia a lekérdezési karakterláncot.

A lekérdezési paraméterek objektummá történő elemzéséhez használja a URL.searchParams„s .entries() metódus, amely egy Iterator kulcs/érték párok, és Object.fromEntries tárggyá alakítani.

let params = new URLSearchParams('q=node&page=2');
let entries = params.entries();
Object.fromEntries(entries);

URL objektum

A URL Az API-t az IE 11 kivételével minden nagyobb böngészőverzió is támogatja. Rugalmasabb módot kínál az URL-ek elemzésére, és lehetőséget biztosít a lekérdezési karakterláncok értékeinek elérésére is. Például:

const url = new URL('https://stackabuse.com/search?q=node&page=2');
const searchParams = url.searchParams;

searchParams.get('q'); 
searchParams.get('page');

url.searchParams által visszaadott példány objektum azonos típusú URLSearchParams.

A url A fenti objektumban az URL minden része részeire van bontva. Például:

url.href; 
url.origin; 
url.protocol; 
url.host; 
url.hostname; 
url.port; 
url.pathname; 
url.search; 
url.hash;

Tiszta JavaScript

Ha valamilyen okból nem tud hozzáférni a fenti API-khoz, vagy jobban szeretné irányítani az elemzést, a következő kód segítségével elemzi a lekérdezési karakterláncot egy objektummá.

function getQueryParams(url) {
    const paramArr = url.slice(url.indexOf('?') + 1).split('&');
    const params = {};
    paramArr.map(param => {
        const [key, val] = param.split('=');
        params[key] = decodeURIComponent(val);
    })
    return params;
}

Megjegyzések: Számos módja van a lekérdezési paraméterek elemzésének egyszerű JS-ben, némelyik bonyolultabb (és robusztusabb), mint mások. Ez csak egy út, és ebből lett adaptálva ezt a lényeget.

Ezután ezt az egyszerű JS-függvényt használhatjuk egyetlen lekérdezési paraméter karakterláncba történő elemzésére:

getQueryParams('https://stackabuse.com/search?q=node&page=2')

Időbélyeg:

Még több Stackabus