Регулярные выражения в путях

Navigo — это лёгкий клиентский роутер для JavaScript, который позволяет управлять навигацией в одностраничных приложениях (SPA). Один из самых мощных инструментов Navigo — поддержка регулярных выражений в определении маршрутов, что даёт гибкость в обработке сложных URL и динамических сегментов пути.

Определение маршрутов с регулярными выражениями

В Navigo путь маршрута может содержать динамические параметры, которые задаются через двоеточие : или через фигурные скобки {}. Для расширенной фильтрации этих параметров можно использовать регулярные выражения, заключая их после двоеточия.

Пример базового динамического параметра:

const router = new Navigo("/");

router.on("/user/:id", (params) => {
    console.log(params.id);
});

Здесь :id захватывает любой сегмент URL, который следует после /user/. Если требуется ограничить формат значения, применяется регулярное выражение.

Ограничение параметров с помощью регулярных выражений

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

router.on("/user/:id(\\d+)", (params) => {
    console.log("Цифровой ID:", params.id);
});

Разбор конструкции:

  • :id — имя параметра.
  • (\\d+) — регулярное выражение, соответствующее одной или более цифрам.
  • Двойной слеш \\ нужен для экранирования символа в строке JavaScript.

Пример работы:

router.navigate("/user/123"); // params.id = "123"
router.navigate("/user/abc"); // маршрут не сработает

Комбинирование нескольких регулярных параметров

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

router.on("/post/:year(\\d{4})/:month(\\d{2})/:slug([a-z0-9\\-]+)", (params) => {
    console.log(params.year, params.month, params.slug);
});

Объяснение:

  • :year(\\d{4}) — четыре цифры для года.
  • :month(\\d{2}) — две цифры для месяца.
  • :slug([a-z0-9\\-]+) — текстовый сегмент, содержащий только строчные буквы, цифры и дефисы.

Такой маршрут подходит для URL вида:

/post/2026/03/example-post

Использование необязательных сегментов

Регулярные выражения позволяют создавать маршруты с необязательными параметрами через ?:

router.on("/archive/:year(\\d{4})/:month(\\d{2})?", (params) => {
    console.log(params.year, params.month);
});
  • :month(\\d{2})? делает параметр month необязательным.
  • URL /archive/2026 будет корректно обработан, а params.month будет undefined.
  • URL /archive/2026/03 вернёт оба параметра.

Ограничение на конкретные строки

Можно применять регулярные выражения для ограничения параметра на конкретные значения:

router.on("/color/:name(red|green|blue)", (params) => {
    console.log("Выбран цвет:", params.name);
});
  • Только red, green или blue будут соответствовать маршруту.
  • Любой другой URL, например /color/yellow, будет игнорироваться.

Рекомендации по регулярным выражениям

  1. Экранируйте специальные символы JavaScript, например \d становится \\d.
  2. Старайтесь использовать конкретные диапазоны, чтобы исключить некорректные URL.
  3. Не перегружайте маршруты сложными выражениями, это может замедлить сопоставление.
  4. Проверяйте порядок маршрутов, поскольку Navigo проверяет их по порядку объявления.

Динамические маршруты с регулярными выражениями в реальном проекте

Использование регулярных выражений особенно полезно в следующих случаях:

  • Валидация идентификаторов и номеров страниц (/page/:num(\\d+))
  • Выбор определённых категорий или типов (/product/:type(electronics|clothes|books))
  • Обработка сложных URL с SEO-слугами (/blog/:slug([a-z0-9\\-]+))

Такой подход делает маршрутизацию чёткой и предсказуемой, предотвращает ошибки при неправильных URL и упрощает логику обработки в обработчиках.

Практическое сравнение

Без регулярного выражения С регулярным выражением
:id захватывает всё подряд :id(\\d+) захватывает только цифры
Возможны ошибки при неверных URL Только корректные URL проходят проверку
Обработка внутри обработчика Ошибка блокируется до вызова обработчика

Использование регулярных выражений в путях Navigo повышает надёжность маршрутов и облегчает поддержку масштабных SPA с большим количеством динамических сегментов.

Оглавление