Obțineți valorile șirurilor de interogare în JavaScript

Într-o adresă URL, valorile șirului de interogare oferă adesea informații despre solicitare, cum ar fi parametrii pentru o căutare sau ID-ul unui obiect pe care îl utilizați. Dacă oricare dintre logica de afaceri sau de solicitare este gestionată în frontend, este important să știți cum să preluați valorile șirului de interogare de la adresa URL. Există o serie de modalități de a realiza acest lucru, dintre care câteva le vom vedea aici.

URLSearchParams

URLSearchParams interfața este acceptată de toate versiunile majore de browser, cu excepția IE 11. Funcționează prin analizarea șirului de interogare a unei adrese URL și oferind o modalitate de a accesa valorile. De exemplu:

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

Unul dintre dezavantajele acestei interfețe este că trebuie să îi transmiteți doar șirul de interogare al unei adrese URL. Dacă lucrați cu adresa URL curentă a browserului, este ușor de făcut, deoarece puteți pur și simplu să treceți window.location.search. Dacă lucrați cu orice altă adresă URL, va trebui să analizați și să transmiteți șirul de interogare separat.

Pentru a analiza parametrii de interogare într-un obiect, utilizați URL.searchParams„s .entries() metoda, care returnează un Iterator de perechi cheie/valoare și Object.fromEntries pentru a-l transforma într-un obiect.

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

Obiect URL

URL API-ul este, de asemenea, acceptat de toate versiunile majore de browser, cu excepția IE 11. Oferă o modalitate mai flexibilă de a analiza adresele URL și oferă, de asemenea, o modalitate de a accesa valorile șirurilor de interogare. De exemplu:

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

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

url.searchParams este același tip de obiect de instanță returnat de URLSearchParams.

url obiectul de mai sus are, de asemenea, toate părțile URL-ului împărțite în părțile sale. De exemplu:

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

JavaScript pur

Dacă din orice motiv nu puteți accesa API-urile de mai sus sau doriți să aveți mai mult control asupra analizării, puteți utiliza următorul cod pentru a analiza șirul de interogare într-un obiect.

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

notițe: Există multe moduri de a analiza parametrii de interogare în JS simplu, unele mai complicate (și robuste) decât altele. Acesta este doar un fel și a fost adaptat esența asta.

Apoi putem folosi această funcție JS simplă pentru a analiza un singur parametru de interogare într-un șir:

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