Получить значения строки запроса в JavaScript

Отметка времени: 21 июля 2022 г., 12:22

В URL-адресе значения строки запроса часто предоставляют информацию о запросе, например, параметры поиска или идентификатор объекта, который вы используете. Если какая-либо бизнес-логика или логика запроса обрабатывается во внешнем интерфейсе, важно знать, как получить значения строки запроса из URL-адреса. Есть несколько способов добиться этого, некоторые из которых мы рассмотрим здесь.

URLSearchParams

Ассоциация URLSearchParams интерфейс поддерживается всеми основными версиями браузеров, кроме IE 11. Он работает, анализируя строку запроса URL-адреса и предоставляя способ доступа к значениям. Например:

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

Одним из недостатков этого интерфейса является то, что вы должны передавать ему только строку запроса URL. Если вы работаете с текущим URL-адресом браузера, это легко сделать, поскольку вы можете просто передать window.location.search. Если вы работаете с любым другим URL-адресом, вам нужно проанализировать и передать строку запроса отдельно.

Чтобы преобразовать параметры запроса в объект, используйте URL.searchParams«s .entries() метод, который возвращает Iterator пар ключ/значение и Object.fromEntries преобразовать его в объект.

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

URL-адрес объекта

Ассоциация URL API также поддерживается всеми основными версиями браузеров, кроме IE 11. Он предлагает более гибкий способ анализа URL-адресов, а также предоставляет способ доступа к значениям строки запроса. Например:

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

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

url.searchParams тот же тип экземпляра объекта, возвращаемый URLSearchParams.

Ассоциация url объект выше также имеет все части URL-адреса, разбитые на части. Например:

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

Чистый JavaScript

Если по какой-либо причине вы не можете получить доступ к указанным выше API или хотите иметь больший контроль над синтаксическим анализом, вы можете использовать следующий код для синтаксического анализа строки запроса в объект.

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

Внимание: есть много способов парсить параметры запроса в простом JS, некоторые из них сложнее (и надежнее), чем другие. Это всего лишь один из способов, и он был адаптирован из это суть.

Затем мы можем использовать эту простую функцию JS для анализа одного параметра запроса в строку:

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

Отметка времени:

Больше от Стекабьюс