Добавление и обновление параметров URL с помощью JavaScript

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

Следующий JavaScript код мгновенно добавит параметр запроса:

let url = new URL('http://example.com');
url.searchParams.set('key', 'value'); // Замените 'key' и 'value' на необходимые вам значения для URL
console.log(url.href); // http://example.com?key=value

С помощью конструктора URL вы создадите объект URL, который, затем, легко будет модифицировать при помощи метода searchParams.set(), что позволит вставить или обновить параметр запроса. Результат выводится через url.href.

Введение в модификацию URL при помощи URLSearchParams

API URLSearchParams предоставляет удобные методы для работы с URL в JavaScript. Они незаменимы при разработке AJAX-приложений, позволяя изменять URL без перезагрузки страницы.

Создание и обновление параметров

let url = new URL('http://example.com');

// Добавление или обновление параметров
url.searchParams.set('first', '1'); // Первым всегда хорошо быть, не так ли?
url.searchParams.append('second', '2'); // И второе место тоже вполне себе ничего
console.log(url.href); // http://example.com?first=1&second=2

Метод set() служит для вставки или обновления параметров. Метод append() добавляет новый параметр, позволяя использовать множество значений для одного ключа.

Подробнее об этом расскажет наш спикер на видео

Кодирование специальных символов

Защитите ваши параметры от специальных символов с помощью encodeURIComponent():

let paramKey = encodeURIComponent('param/key'); // Ключ 'param/key' остается нетронутым
let paramValue = encodeURIComponent('value with spaces'); // И 'value with spaces' сохранит свои пробелы
url.searchParams.set(paramKey, paramValue);

Обновление параметров в существующем URL

Если вы работаете с уже существующим URL или текущим адресом, делайте следующее:

let currentUrl = new URL(window.location.href);
currentUrl.searchParams.set('newParam', 'newValue'); // Это как прикрепить новый, светящийся тег к URL
history.pushState({}, '', currentUrl); // Обновляем URL, и всё это без перезагрузки страницы!

Компатибельность с браузерами

Важно проверять практичность браузеров, так как некоторые устаревшие, например, Internet Explorer, не поддерживают URLSearchParams.

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

Представьте, что добавление параметра к URL – это как прикрепление нового ярлыка (🏷️) к чемодану (💼):

Исходный URL (💼): 
https://example.com/page

Добавление параметра (➕🏷️): 
?newParameter=value

Итоговый URL (💼🏷️): 
https://example.com/page?newParameter=value

Подобно тому, как ярлык содержит информацию о чемодане, параметр предоставляет дополнительные сведения или функции для веб-страницы.

Продвинутые техники работы с URLSearchParams

Настало время освоить искусство управления URL с помощью URLSearchParams!

Параметры массива

Для того чтобы работать с массивом параметров, используйте следующий код:

let arrayValues = ['value1', 'value2', 'value3'];
arrayValues.forEach((value, index) => {
  url.searchParams.append(`arrayParam[${index}]`, value);
});

Ускорение работы с помощью регулярных выражений

Когда время – важный ресурс, используйте регулярные выражения:

let queryString = currentUrl.search.replace(/(key=)[^&]+/, '$1newValue');
currentUrl.search = queryString; // И вот настало время регулярных выражений!

Чтение текущей строки запроса

Если вам необходимо получить строку запроса текущей страницы, воспользуйтесь window.location.search:

let params = new URLSearchParams(window.location.search);
let specificValue = params.get('key'); // Получите значение параметра 'key', если оно там есть!

Правильное экранирование спецсимволов

Для экранирования специальных символов используйте escape():

let safeValue = escape('This & That');
url.searchParams.set('query', safeValue); // И вот 'This & That' стали безопасными для веб-среды

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

1. URLSearchParams – Веб-API | MDN — Великолепное введение в мир управления параметрами URL в JavaScript.
2. Добавление параметра в URL с помощью JavaScript – Stack Overflow — Ощутите силу коллективного интеллекта и получите выверенные решения по динамическому изменению параметров URL.
3. "URLSearchParams" | Могу ли я использовать... Таблицы поддержки для HTML5, CSS3 и т.д. — Сервис для проверки совместимости URLSearchParams с разнообразными браузерами.
4. Свойство Location href — Погрузитесь в детали location.href и научитесь манипулировать целым URL.
5. История: метод pushState() – Веб-API | MDN — Узнайте, как history.pushState() изменяет URL, не теряя при этом содержимого страницы.
6. Использование HTML5 History API | CSS-Tricks — Изучите возможности адаптивной навигации с HTML5 History API.
7. query-string – npm — Дополнительная библиотека для работы со строками запроса в JavaScript.