Извлечение GET-параметров из URL в JavaScript: советы и трюки

Быстрый ответ

Для получения GET-параметров используйте объект URLSearchParams:

let params = new URLSearchParams(document.location.search);
let value = params.get('key'); // 'key' – это имя целевого параметра

Таким образом можно извлечь значение параметра 'key' из строки запроса URL. Просто и быстро!

Когда в глазах мелькают сложные запросы

Если перед вами встаёт задача работы с URL, где представлена запутанная строка запроса, обратитесь к инструментам JavaScript:

let searchParams = window.location.search.substr(1).split('&');
let queryParams = {};

for (let param of searchParams) {
    let [key, value] = param.split('=');
    queryParams[key] = decodeURIComponent(value || "");
}

Такой подход позволяет преобразовать строку запроса в объект, а затем можно начинать расшифровывать параметры.

Безопасность прежде всего: вопросы безопасности

Всегда помните правило: "Никогда не доверяйте URL":

if(queryParams.hasOwnProperty('userInput')) {
    let userInput = queryParams['userInput'];
    // Обязательно очистите userInput перед его использованием!
}

Всегда проверяйте входные данные, чтобы ваше приложение было защищено от вредоносных атак.

Визуализация

Представьте себе, что вы — смотритель набора ключей🗝️ на празднике замков🎡, где ключи ассоциируются с параметрами. Ваша задача – помогать людям открыть их закрытые шкатулки🎁 с известными как URL:

URL: http://somelocksmithcarnival.com?🔑key1=value1&🔑key2=value2

С использованием JavaScript вы без проблем подобрали ключ ко всем значениям:

const params = new URLSearchParams(window.location.search);
let box1 = params.get('key1'); // 🔑key1 открывает замок 'value1'
let box2 = params.get('key2'); // 🔑key2 открывает замок 'value2'

Владение ремеслом: парсинг вручную

Иногда приходится брать вещи в свои руки и делать всё самостоятельно:

function transformToAssocArray(query) {
  if (!query) return {}; 
  return query.split('&').reduce((params, param) => { 
    let [key, value] = param.split('='); 
    params[key] = value ? decodeURIComponent(value.replace('+', ' ')) : ''; 
    return params;
  }, {});
}

let queryParams = transformToAssocArray(window.location.search.substr(1));

Ручной парсинг учитывает обработку пустых или некорректных строк запросов.

Развиваем наш гибкий мир: добавление и манипулирование параметрами

Вы можете воспользоваться URLSearchParams для добавления и изменения параметров:

params.append('newParam', 'newValue'); // добавляем новый параметр 'newParam' со значением 'newValue'
params.set('existingParam', 'updatedValue'); // обновляем имеющийся параметр 'existingParam'

Отправляемся в гиперпространство: использование объекта window.location

Для охвата большего количества возможностей в области window.location знакомьтесь со следующими элементами:

let currentUrl = window.location.href; // текущий URL
let pathname = window.location.pathname; // путь до ресурса
let hash = window.location.hash; // якорь URL

Применяйте эти возможности для успешного решения программных задач и получения нужной информации.

Полезные материалы

1. Window: location property – Веб-API | MDN — Всё, что вам требуется знать об объекте location.
2. Как можно получить параметры строки запроса в JavaScript? – Stack Overflow — Многообразие подходов к работе со строками запросов.
3. Как получить GET-параметры URL с помощью JavaScript — SitePoint — Простые стратегии извлечения GET-параметров из URL.
4. Получение переменных URL | CSS-Tricks — Полезное руководство для работы с параметрами URL.
5. Объекты URL — Поглубже исследуем объект URL.
6. GitHub – sindresorhus/query-string: Обработка и формирование строк запросов — Универсальный инструмент для взаимодействия со строками запросов.
7. URLSearchParams – Веб-API | MDN — Золотой стандарт в API URLSearchParams.