Добавление и обновление параметров URL в JavaScript и jQuery

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

Для установки или обновления параметра строки запроса можно использовать URLSearchParams:

const url = new URL(window.location);
url.searchParams.set('key', 'newValue'); // Устанавливаем новое значение параметра
window.history.pushState({}, '', url);

В случае, когда URLSearchParams не поддерживается браузером, примените функцию с использованием регулярных выражений:

function updateQuery(uri, key, value) {
  let re = new RegExp("([?&])" + key + "=.*?(&|$)", "i"); // Создаём регулярное выражение для поиска параметра
  if (uri.match(re)) {
    return uri.replace(re, '$1' + key + '=' + value + '$2'); // Обновляем значение параметра
  } else {
    let separator = uri.includes('?') ? '&' : '?'; // Определяем корректный разделитель
    return uri + separator + key + '=' + value; // Добавляем новый параметр
  }
}

window.history.pushState({}, '', updateQuery(window.location.href, 'key', 'newValue'));

Оба метода позволяют изменить URL без перезагрузки страницы!

Проверенные принципы работы с URL

Следуйте этим рекомендациям при работе с URL:

Адаптация под динамические условия

Готовьтесь к обработке динамических данных. URL должны быть гибкими и устойчивыми к обновлению параметров запроса.

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

Подготовительная проверка

Всегда проверяйте наличие параметров перед внесением в URL каких-либо изменений. Это предотвратит повторения и гарантирует актуальность данных.

Разделители — важная деталь

Правильное применение символов "?" и "&" критически важно для сохранения целостности URL.

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

Возможно, полезно будет представить строку запроса как навигационную карту:

🔓 Базовый адрес: https://example.com/page?param1=value1&param2=value2

Изменение параметра — это как обновление координат на карте:

🔧 Меняем 'param1' на 'newValue'

🔄 Было: param1=value1
🔒 Стало:  param1=newValue

Вот как выглядит карта после обновления:

Исходная: 🔓🔗[param1=value1, param2=value2]
Обновлённая: 🔓🔗[param1=newValue, param2=value2]

Ваш URL успешно обновлён!

Особые случаи при работе с URL

В процессе работы могут появиться некоторые трудности:

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

Для безопасной передачи специальных символов или пробелов используйте encodeURIComponent:

url.searchParams.set('key', encodeURIComponent('new Value')); // Кодируем значение для передачи

Поддержка в различных браузерах

Если старые браузеры не поддерживают URLSearchParams, на помощь придёт полифилл.

Работа с массивами и объектами

При работе с массивами и объектами используйте сериализацию для сохранения данных и аккуратно парсите их при чтении.

Удаление параметра

Для удаления параметра воспользуйтесь URLSearchParams.delete:

url.searchParams.delete('key'); // Удаляем параметр
window.history.pushState({}, '', url);

Управление историей браузера

Бесшумное изменение URL

history.replaceState позволяет изменить URL без записи изменений в истории браузера:

window.history.replaceState({}, '', url); // Тихо выполняем изменение

Отмена изменений

Если необходимо отменить изменения с возвратом на предыдущий URL, используйте location.assign или location.replace.

Сохранение позиции в URL

При обновлении URL сохраняйте якоря (хеш-теги). Это действительно важно!

Инструменты и ресурсы

Изучайте документацию MDN и пробуйте написанный код на платформах вроде JSFiddle. Полезные библиотеки можно найти на GitHub или npm.