Query-tekenreekswaarden ophalen in JavaScript

Tijdstempel: 21 juli 2022 12:22 uur

In een URL geven queryreekswaarden vaak informatie over het verzoek, zoals parameters voor een zoekopdracht of de ID van een object dat u gebruikt. Als een van de bedrijfs- of aanvraaglogica wordt verwerkt in de frontend, is het belangrijk om te weten hoe u de querytekenreekswaarden uit de URL kunt ophalen. Er zijn een aantal manieren om dit te bereiken, waarvan we er hier een paar zullen zien.

URLZoekparametersPa

De URLSearchParams interface wordt ondersteund door alle belangrijke browserversies behalve IE 11. Het werkt door de queryreeks van een URL te ontleden en een manier te bieden om toegang te krijgen tot de waarden. Bijvoorbeeld:

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

Een van de nadelen van deze interface is dat je alleen de queryreeks van een URL moet doorgeven. Als u met de huidige browser-URL werkt, is dat gemakkelijk te doen, omdat u gewoon kunt doorgeven window.location.search. Als u met een andere URL werkt, moet u de queryreeks afzonderlijk ontleden en doorgeven.

Om de queryparameters in een object te ontleden, gebruik URL.searchParams's .entries() methode, die an . retourneert Iterator van sleutel/waarde-paren, en Object.fromEntries om het om te zetten in een object.

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

URL-object

De URL API wordt ook ondersteund door alle belangrijke browserversies behalve IE 11. Het biedt een flexibelere manier om URL's te ontleden, en het biedt ook een manier om toegang te krijgen tot de queryreekswaarden. Bijvoorbeeld:

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

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

url.searchParams is hetzelfde type instantieobject dat wordt geretourneerd door URLSearchParams.

De url object hierboven heeft ook alle delen van de URL uitgesplitst in delen. Bijvoorbeeld:

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

Puur JavaScript

Als u om welke reden dan ook geen toegang kunt krijgen tot de bovenstaande API's of als u meer controle wilt hebben over het parseren, kunt u de volgende code gebruiken om de queryreeks in een object te parseren.

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: Er zijn veel manieren om queryparameters in gewone JS te ontleden, sommige ingewikkelder (en robuuster) dan andere. Dit is maar een manier, en is aangepast van deze kern.

We kunnen dan deze gewone JS-functie gebruiken om een ​​enkele queryparameter in een string te ontleden:

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

Tijdstempel:

Meer van Stapelmisbruik