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