Få søkestrengverdier i JavaScript

Tidsstempel: 21. juli 2022 12:22

I en URL gir spørringsstrengverdier ofte informasjon om forespørselen, som parametere for et søk eller ID-en til et objekt du bruker. Hvis noen av forretnings- eller forespørselslogikken håndteres i frontend, er det viktig å vite hvordan du henter søkestrengverdiene fra URL-en. Det er flere måter å oppnå dette på, noen av dem vil vi se her.

URLSearchParams

De URLSearchParams grensesnittet støttes av alle større nettleserversjoner unntatt IE 11. Det fungerer ved å analysere søkestrengen til en URL og gi en måte å få tilgang til verdiene på. For eksempel:

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

En av ulempene med dette grensesnittet er at du må sende det bare søkestrengen til en URL. Hvis du jobber med gjeldende nettleser-URL, er det enkelt å gjøre siden du bare kan passere window.location.search. Hvis du arbeider med en annen URL, må du analysere og sende søkestrengen separat.

For å analysere spørringsparametrene til et objekt, bruk URL.searchParams's .entries() metode, som returnerer en Iterator av nøkkel/verdi-par, og Object.fromEntries for å konvertere det til et objekt.

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

URL-objekt

De URL API støttes også av alle større nettleserversjoner unntatt IE 11. Det tilbyr en mer fleksibel måte å analysere URL-er på, og den gir også tilgang til søkestrengverdiene. For eksempel:

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

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

url.searchParams er samme type forekomstobjekt returnert av URLSearchParams.

De url objektet ovenfor har også alle deler av URL-en delt ut i sine deler. For eksempel:

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

Ren JavaScript

Hvis du av en eller annen grunn ikke får tilgang til API-ene ovenfor eller ønsker å ha mer kontroll over parsingen, kan du bruke følgende kode for å analysere spørringsstrengen til et objekt.

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

Merknader: Det er mange måter å analysere spørringsparametere på i vanlig JS, noen mer kompliserte (og robuste) enn andre. Dette er bare én vei, og ble tilpasset fra denne kjernen.

Vi kan deretter bruke denne enkle JS-funksjonen til å analysere en enkelt spørringsparam til en streng:

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

Tidstempel:

Mer fra Stackabuse