Ottieni valori di stringa di query in JavaScript

Timestamp: 21 luglio 2022 12:22

In un URL, i valori della stringa di query spesso forniscono informazioni sulla richiesta, come i parametri per una ricerca o l'ID di un oggetto che stai utilizzando. Se una delle logiche aziendali o di richiesta viene gestita nel frontend, è importante sapere come recuperare i valori della stringa di query dall'URL. Ci sono diversi modi per raggiungere questo obiettivo, alcuni dei quali vedremo qui.

URLSearchParams

I URLSearchParams L'interfaccia è supportata da tutte le principali versioni del browser tranne IE 11. Funziona analizzando la stringa di query di un URL e fornendo un modo per accedere ai valori. Per esempio:

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

Uno degli svantaggi di questa interfaccia è che devi passarle solo la stringa di query di un URL. Se stai lavorando con l'URL del browser corrente, è facile poiché puoi semplicemente passare window.location.search. Se stai lavorando con qualsiasi altro URL, dovrai analizzare e passare la stringa di query separatamente.

Per analizzare i parametri della query in un oggetto, utilizzare URL.searchParams'S .entries() metodo, che restituisce an Iterator di coppie chiave/valore e Object.fromEntries per convertirlo in un oggetto.

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

Oggetto URL

I URL L'API è supportata anche da tutte le principali versioni del browser ad eccezione di IE 11. Offre un modo più flessibile per analizzare gli URL e fornisce anche un modo per accedere ai valori della stringa di query. Per esempio:

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

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

url.searchParams è lo stesso tipo di oggetto istanza restituito da URLSearchParams.

I url l'oggetto sopra ha anche tutte le parti dell'URL suddivise nelle sue parti. Per esempio:

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

JavaScript puro

Se per qualsiasi motivo non sei in grado di accedere alle API precedenti o desideri avere un maggiore controllo sull'analisi, puoi utilizzare il codice seguente per analizzare la stringa di query in un oggetto.

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:: Esistono molti modi per analizzare i parametri di query in JS semplice, alcuni più complicati (e robusti) di altri. Questo è solo un modo ed è stato adattato da questo lievito.

Possiamo quindi utilizzare questa semplice funzione JS per analizzare un singolo parametro di query in una stringa:

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

Timestamp:

Di più da Impilamento