Abrufen von Abfragezeichenfolgenwerten in JavaScript

Zeitstempel: 21. Juli 2022, 12:22 Uhr

In einer URL stellen Abfragezeichenfolgenwerte häufig Informationen über die Anforderung bereit, z. B. Parameter für eine Suche oder die ID eines von Ihnen verwendeten Objekts. Wenn die Geschäfts- oder Anforderungslogik im Front-End verarbeitet wird, ist es wichtig zu wissen, wie die Abfragezeichenfolgenwerte aus der URL abgerufen werden. Es gibt eine Reihe von Möglichkeiten, dies zu erreichen, von denen wir einige hier sehen werden.

URLSuchparameter

Das URLSearchParams -Schnittstelle wird von allen gängigen Browserversionen außer IE 11 unterstützt. Es funktioniert, indem es die Abfragezeichenfolge einer URL analysiert und eine Möglichkeit bietet, auf die Werte zuzugreifen. Zum Beispiel:

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

Einer der Nachteile dieser Schnittstelle ist, dass Sie ihr nur die Abfragezeichenfolge einer URL übergeben müssen. Wenn Sie mit der aktuellen Browser-URL arbeiten, ist dies einfach, da Sie einfach bestehen können window.location.search. Wenn Sie mit einer anderen URL arbeiten, müssen Sie die Abfragezeichenfolge analysieren und separat übergeben.

Um die Abfrageparameter in ein Objekt zu parsen, verwenden Sie URL.searchParams's .entries() Methode, die an . zurückgibt Iterator von Schlüssel/Wert-Paaren und Object.fromEntries um es in ein Objekt umzuwandeln.

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

URL-Objekt

Das URL Die API wird auch von allen gängigen Browserversionen außer IE 11 unterstützt. Sie bietet eine flexiblere Möglichkeit zum Analysieren von URLs und bietet auch eine Möglichkeit, auf die Abfragezeichenfolgenwerte zuzugreifen. Zum Beispiel:

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

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

url.searchParams ist derselbe Typ von Instanzobjekt, das zurückgegeben wird URLSearchParams.

Das url Objekt oben hat auch alle Teile der URL in ihre Teile aufgeschlüsselt. Zum Beispiel:

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

Reines JavaScript

Wenn Sie aus irgendeinem Grund nicht auf die obigen APIs zugreifen können oder mehr Kontrolle über das Parsen haben möchten, können Sie den folgenden Code verwenden, um die Abfragezeichenfolge in ein Objekt zu parsen.

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;
}

Note: Es gibt viele Möglichkeiten, Abfrageparameter in einfachem JS zu analysieren, einige komplizierter (und robuster) als andere. Dies ist nur eine Möglichkeit und wurde von angepasst diese Hefe.

Wir können dann diese einfache JS-Funktion verwenden, um einen einzelnen Abfrageparameter in eine Zeichenfolge zu zerlegen:

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

Zeitstempel:

Mehr von Stapelmissbrauch