Добавление и обновление параметров 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.