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

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

1. URLSearchParams — Веб API | MDN — Надёжная информация о работе с URL на MDN.
2. Как получить параметры URL с помощью JavaScript — SitePoint — Понятное руководство по работе с параметрами URL от SitePoint.
3. Использование параметров строки запроса в JavaScript — Советы по работе с параметрами запроса и историей браузера от Дэвида Уолша.
4. URLSearchParams | Can I use... Support tables for HTML5, CSS3 — Проверьте, поддерживает ли ваш браузер API.
5. Понимание параметров по умолчанию в JavaScript | DigitalOcean — Глубокий анализ параметров по умолчанию от DigitalOcean.
6. GitHub – medialize/URI.js: JavaScript library for working with URLs — Превосходная библиотека на GitHub для всесторонней работы с URL.