Изменение и добавление параметра URL в JavaScript: rows
Быстрый ответ
Для того, чтобы изменить параметры запроса в адресной строке и установить значения по умолчанию, вы можете воспользоваться интерфейсом URLSearchParams
:
const setURLParams = (url, updates, defaults) => {
let searchParams = new URL(url).searchParams;
// Устанавливаем значения по умолчанию
for (let [key, value] of Object.entries(defaults || {})) {
if (!searchParams.has(key)) {
searchParams.set(key, value);
}
}
// Обновляем остальные параметры
for (let [key, value] of Object.entries(updates)) {
searchParams.set(key, value);
}
// Обновляем URL в адресной строке без перезагрузки страницы
window.history.replaceState(null, '', '?' + searchParams);
};
// Пример использования функции
setURLParams(location.href, {sort: 'date'}, {filter: 'active'});
Таким образом, управление параметрами запроса в URL становится простым и эффективным.
Идем дальше
Погрузимся подробнее в возможности URLSearchParams
и рассмотрим более сложные сценарии.
Сохранение якорей
Якоря играют важную роль, поэтому не теряйте их при изменении URL:
const getWithAnchorsHandled = (url, updates) => {
let [base, hash] = url.split('#');
return `${setURLParams(base, updates)}${hash ? '#' + hash : ''}`;
};
Сохраняя якоря, вы обеспечиваете стабильность работы одностраничных приложений.
Навигация с учетом контекста
Для управления параметрами страницы в зависимости от контекста применяйте следующий подход:
const setPageParamDefault = (url, isAll) => {
let searchParams = new URL(url).searchParams;
if (!searchParams.has('page') && !isAll) {
searchParams.set('page', '1');
}
window.history.replaceState(null, '', '?' + searchParams.toString());
};
Этот подход позволяет предотвратить путаницу с параметрами навигации.
Обеспечение кроссбраузерной совместимости
Полифил для URLSearchParams
даёт возможность использовать API даже в старых браузерах.
Решение на чистом JavaScript
Если вы предпочитаете чистый JavaScript, регулярные выражения придут на помощь при работе с параметрами URL:
function updateParameter(url, param, value) {
const re = new RegExp("([?&])" + param + "=.*?(&|$)", "i");
const separator = url.includes('?') ? "&" : "?";
if (url.match(re)) {
return url.replace(re, '$1' + param + "=" + value + '$2');
} else {
return url + separator + param + "=" + value;
}
}
Этот метод надёжен и проверен временем. Его выбирают те, кто предпочитает классику.
Визуализация
Представьте, что каждый параметр в URL — это кнопка на пульте управления радио 📻:
// Исходный URL
🌐 'URL=sounds&coordinates=1&frequency=100.5'
setRadioParameters({ URL: 'music', coordinates: 5, frequency: 105.7});
// URL после изменений
🌐 'URL=music&coordinates=5&frequency=105.7'
Изменяя параметры, вы перенастраиваете поток данных точно так же, как если бы настраивали радиоприёмник.
Работа со значениями, равными false
Не игнорируйте значения, которые в логическом контексте равны false, такие как 0
или ''
. Они могут быть важными:
const originalUrl = '...';
const paramsWithFalsyValue = { page: 0 };
setURLParams(originalUrl, paramsWithFalsyValue);
Значение 0
может нести в себе значимую информацию, которую не следует игнорировать.
Помощники из мира библиотек
Библиотеки, такие как URI.js
или query-string
с npm, предоставляют вам дополнительные инструменты для работы с URL.
Решения с jQuery
Для программистов, предпочитающих jQuery
, существуют плагины, которые упрощают манипуляции с параметрами URL.
Мастерское создание URL
Станьте истинным мастером создания URL-адресов, динамически изменяя их в зависимости от происходящих сценариев:
const generateDynamicUrl = (base, config) => {
let url = base;
Object.keys(config).forEach(key => {
let value = typeof config[key] === 'function' ? config[key]() : config[key];
url = setURLParams(url, {[key]: value});
});
return url;
};
Теперь вы — настоящий мастер создания URL-адресов.
Полезные материалы
- URLSearchParams — Веб API | MDN — Надёжная информация о работе с URL на MDN.
- Как получить параметры URL с помощью JavaScript — SitePoint — Понятное руководство по работе с параметрами URL от SitePoint.
- Использование параметров строки запроса в JavaScript — Советы по работе с параметрами запроса и историей браузера от Дэвида Уолша.
- URLSearchParams | Can I use... Support tables for HTML5, CSS3 — Проверьте, поддерживает ли ваш браузер API.
- Понимание параметров по умолчанию в JavaScript | DigitalOcean — Глубокий анализ параметров по умолчанию от DigitalOcean.
- GitHub – medialize/URI.js: JavaScript library for working with URLs — Превосходная библиотека на GitHub для всесторонней работы с URL.