API шаблонов URL

Ограниченная доступность

Эта функция не является базовой, так как она не работает в некоторых из самых широко используемых браузеров.

Экспериментально: Это экспериментальная технология .
Перед использованием в рабочей среде внимательно изучите таблицу совместимости с браузерами.

Примечание: Эта функция доступна в Web Workers.

API шаблонов URL определяет синтаксис, используемый для создания соответствия шаблонам URL. Эти шаблоны могут соответствовать URL-адресам или отдельным компонентам URL-адресов. API шаблонов URL используется интерфейсом URLPattern.

Основные понятия и использование

Синтаксис шаблонов основан на синтаксисе библиотеки path-to-regexp. Шаблоны могут содержать:

Литеральные строки, которые будут соответствовать точно.
Подстановочные знаки (/posts/*) , которые соответствуют любому символу.
Именованные группы (/books/:id) , которые извлекают часть сопоставленного URL.
Незахватывающие группы (/books{/old}?) , которые делают части шаблона необязательными или могут соответствовать несколько раз.
RegExp группы (/books/(\\d+)) , которые обеспечивают сопоставление произвольно сложных регулярных выражений с некоторыми ограничениями. Обратите внимание, что круглые скобки не являются частью регулярного выражения, а вместо этого определяют их содержимое как регулярное выражение.

Подробности синтаксиса можно найти в разделе синтаксиса шаблонов ниже.

Интерфейсы

API шаблонов URL имеет только один связанный интерфейс:

URLPattern Экспериментально: Представляет шаблон, который может соответствовать URL-адресам или частям URL-адресов. Шаблон может содержать захватывающие группы, которые извлекают части сопоставленного URL.

Синтаксис шаблонов

Синтаксис шаблонов основан на JavaScript-библиотеке path-to-regexp. Этот синтаксис похож на синтаксис, используемый в Ruby on Rails, или JavaScript-фреймворках, таких как Express или Next.js.

Фиксированный текст и группы захвата

Каждый шаблон может содержать сочетание фиксированного текста и групп. Фиксированный текст — это последовательность символов, которая соответствует точно. Группы соответствуют произвольной строке на основе правил соответствия. Каждая часть URL имеет свои собственные правила по умолчанию, которые объясняются ниже, но их можно перезаписать.

// A pattern matching some fixed text
const pattern = new URLPattern({ pathname: "/books" });
console.log(pattern.test("https://example.com/books")); // true
console.log(pattern.exec("https://example.com/books").pathname.groups); // {}

// A pattern matching with a named group
const pattern = new URLPattern({ pathname: "/books/:id" });
console.log(pattern.test("https://example.com/books/123")); // true
console.log(pattern.exec("https://example.com/books/123").pathname.groups); // { id: '123' }

Подстановочный знак сегмента

По умолчанию группа, соответствующая части URL pathname, будет соответствовать всем символам, кроме прямой черты (/). В части hostname, группа будет соответствовать всем символам, кроме точки (.). Во всех остальных частях группа будет соответствовать всем символам. Подстановочный знак сегмента не жадный, что означает, что он будет соответствовать кратчайшей возможной строке.

Сопоставители регулярных выражений

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

const pattern = new URLPattern("/books/:id(\\d+)", "https://example.com");
console.log(pattern.test("https://example.com/books/123")); // true
console.log(pattern.test("https://example.com/books/abc")); // false
console.log(pattern.test("https://example.com/books/")); // false

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

Некоторые шаблоны регулярных выражений не работают так, как вы ожидаете:

Начинается с ^ будет соответствовать только в начале протокольной части URLPattern и является избыточным, если используется.

// with `^` in pathname
const pattern = new URLPattern({ pathname: "(^b)" });
console.log(pattern.test("https://example.com/ba")); // false
console.log(pattern.test("https://example.com/xa")); // false

// with `^` in protocol
const pattern = new URLPattern({ protocol: "(^https?)" });
console.log(pattern.test("https://example.com/index.html")); // true
console.log(pattern.test("xhttps://example.com/index.html")); // false

// without `^` in protocol
const pattern = new URLPattern({ protocol: "(https?)" });
console.log(pattern.test("https://example.com/index.html")); // true
console.log(pattern.test("xhttps://example.com/index.html")); // false

Заканчивается на $ будет соответствовать только в конце части хеша URLPattern и является избыточным, если используется.

// with `$` in pathname
const pattern = new URLPattern({ pathname: "(path$)" });
console.log(pattern.test("https://example.com/path")); // false
console.log(pattern.test("https://example.com/other")); // false

// with `$` in hash
const pattern = new URLPattern({ hash: "(hash$)" });
console.log(pattern.test("https://example.com/#hash")); // true
console.log(pattern.test("xhttps://example.com/#otherhash")); // false

// without `$` in hash
const pattern = new URLPattern({ hash: "(hash)" });
console.log(pattern.test("https://example.com/#hash")); // true
console.log(pattern.test("xhttps://example.com/#otherhash")); // false

Прогнозы вперед и назад никогда не будут соответствовать какой-либо части URLPattern.

// lookahead
const pattern = new URLPattern({ pathname: "(a(?=b))" });
console.log(pattern.test("https://example.com/ab")); // false
console.log(pattern.test("https://example.com/ax")); // false

// negative-lookahead
const pattern = new URLPattern({ pathname: "(a(?!b))" });
console.log(pattern.test("https://example.com/ab")); // false
console.log(pattern.test("https://example.com/ax")); // false

// lookbehind
const pattern = new URLPattern({ pathname: "((?<=b)a)" });
console.log(pattern.test("https://example.com/ba")); // false
console.log(pattern.test("https://example.com/xa")); // false

// negative-lookbehind
const pattern = new URLPattern({ pathname: "((?<!b)a)" });
console.log(pattern.test("https://example.com/ba")); // false
console.log(pattern.test("https://example.com/xa")); // false

Круглые скобки необходимо экранировать в выражениях диапазона в URLPattern, хотя в RegExp это не требуется.
```
new URLPattern({ pathname: "([()])" }); // throws
new URLPattern({ pathname: "([\$\$])" }); // ok

new RegExp("[()]"); // ok
new RegExp("[\$\$]"); // ok
```

Безымянные и именованные группы

Группы могут быть именованными или безымянными. Именованные группы задаются путем добавления префикса имени группы двоеточием (:). Группы регулярных выражений, которые не имеют префикса двоеточия и имени, являются безымянными. Безымянные группы нумеруются в результате сопоставления в соответствии с их порядком в шаблоне.

// A named group
const pattern = new URLPattern("/books/:id(\\d+)", "https://example.com");
console.log(pattern.exec("https://example.com/books/123").pathname.groups); // { id: '123' }

// An unnamed group
const pattern = new URLPattern("/books/(\\d+)", "https://example.com");
console.log(pattern.exec("https://example.com/books/123").pathname.groups); // { '0': '123' }

Модификаторы групп

Группы также могут иметь модификаторы. Они указываются после имени группы (или после регулярного выражения, если оно есть). Существует три модификатора: ? для придания группе необязательности, + для повторения группы один или несколько раз и * для повторения группы ноль или несколько раз.

// An optional group
const pattern = new URLPattern("/books/:id?", "https://example.com");
console.log(pattern.test("https://example.com/books/123")); // true
console.log(pattern.test("https://example.com/books")); // true
console.log(pattern.test("https://example.com/books/")); // false
console.log(pattern.test("https://example.com/books/123/456")); // false
console.log(pattern.test("https://example.com/books/123/456/789")); // false

// A repeating group with a minimum of one
const pattern = new URLPattern("/books/:id+", "https://example.com");
console.log(pattern.test("https://example.com/books/123")); // true
console.log(pattern.test("https://example.com/books")); // false
console.log(pattern.test("https://example.com/books/")); // false
console.log(pattern.test("https://example.com/books/123/456")); // true
console.log(pattern.test("https://example.com/books/123/456/789")); // true

// A repeating group with a minimum of zero
const pattern = new URLPattern("/books/:id*", "https://example.com");
console.log(pattern.test("https://example.com/books/123")); // true
console.log(pattern.test("https://example.com/books")); // true
console.log(pattern.test("https://example.com/books/")); // false
console.log(pattern.test("https://example.com/books/123/456")); // true
console.log(pattern.test("https://example.com/books/123/456/789")); // true

Разделители групп

Шаблоны также могут содержать разделители групп. Это части шаблона, которые заключены в фигурные скобки ({}). Эти разделители групп не захватываются в результате сопоставления, как захватывающие группы, но к ним все равно можно применять модификаторы, как и к группам. Если разделители групп не изменены модификатором, они обрабатываются так, как если бы элементы внутри них были просто частью родительского шаблона. Разделители групп не могут содержать другие разделители групп, но могут содержать любые другие элементы шаблона (захватывающие группы, регулярные выражения, подстановочные знаки или фиксированный текст).

// A group delimiter with a ? (optional) modifier
const pattern = new URLPattern("/book{s}?", "https://example.com");
console.log(pattern.test("https://example.com/books")); // true
console.log(pattern.test("https://example.com/book")); // true
console.log(pattern.exec("https://example.com/books").pathname.groups); // {}

// A group delimiter without a modifier
const pattern = new URLPattern("/book{s}", "https://example.com");
console.log(pattern.pathname); // /books
console.log(pattern.test("https://example.com/books")); // true
console.log(pattern.test("https://example.com/book")); // false

// A group delimiter containing a capturing group
const pattern = new URLPattern({ pathname: "/blog/:id(\\d+){-:title}?" });
console.log(pattern.test("https://example.com/blog/123-my-blog")); // true
console.log(pattern.test("https://example.com/blog/123")); // true
console.log(pattern.test("https://example.com/blog/my-blog")); // false

Автоматическое добавление префикса групп в имена путей

В шаблонах, которые соответствуют части URL pathname, группам добавляется автоматический префикс косой черты (/) , если определение группы предваряется косой чертой (/). Это полезно для групп с модификаторами, поскольку это позволяет повторяющимся группам работать как ожидается.

Если вы не хотите автоматического добавления префикса, вы можете отключить его, заключив группу в разделители групп ({}). Разделители групп не имеют поведения автоматического добавления префикса.

// A pattern with an optional group, preceded by a slash
const pattern = new URLPattern("/books/:id?", "https://example.com");
console.log(pattern.test("https://example.com/books/123")); // true
console.log(pattern.test("https://example.com/books")); // true
console.log(pattern.test("https://example.com/books/")); // false

// A pattern with a repeating group, preceded by a slash
const pattern = new URLPattern("/books/:id+", "https://example.com");
console.log(pattern.test("https://example.com/books/123")); // true
console.log(pattern.test("https://example.com/books/123/456")); // true
console.log(pattern.test("https://example.com/books/123/")); // false
console.log(pattern.test("https://example.com/books/123/456/")); // false

// Segment prefixing does not occur outside of pathname patterns
const pattern = new URLPattern({ hash: "/books/:id?" });
console.log(pattern.test("https://example.com#/books/123")); // true
console.log(pattern.test("https://example.com#/books")); // false
console.log(pattern.test("https://example.com#/books/")); // true

// Disabling segment prefixing for a group using a group delimiter
const pattern = new URLPattern({ pathname: "/books/{:id}?" });
console.log(pattern.test("https://example.com/books/123")); // true
console.log(pattern.test("https://example.com/books")); // false
console.log(pattern.test("https://example.com/books/")); // true

Символы подстановки

Символ подстановки (*) — это сокращение для безымянной захватывающей группы, которая соответствует всем символам ноль или более раз. Вы можете разместить его в любом месте шаблона. Подстановочный знак жадный, что означает, что он будет соответствовать самой длинной возможной строке.

// A wildcard at the end of a pattern
const pattern = new URLPattern("/books/*", "https://example.com");
console.log(pattern.test("https://example.com/books/123")); // true
console.log(pattern.test("https://example.com/books")); // false
console.log(pattern.test("https://example.com/books/")); // true
console.log(pattern.test("https://example.com/books/123/456")); // true

// A wildcard in the middle of a pattern
const pattern = new URLPattern("/*.png", "https://example.com");
console.log(pattern.test("https://example.com/image.png")); // true
console.log(pattern.test("https://example.com/image.png/123")); // false
console.log(pattern.test("https://example.com/folder/image.png")); // true
console.log(pattern.test("https://example.com/.png")); // true

Нормализация шаблонов

При разборе шаблона он автоматически нормализуется до канонической формы. Например, символы Юникода кодируются в процентах в свойстве pathname, в свойстве hostname используется кодировка Punycode, номера портов по умолчанию опускаются, пути, такие как /foo/./bar/, сводятся к простому /foo/bar, и т. д. Кроме того, есть некоторые представления шаблонов, которые разбираются до одного и того же базового значения, например, foo и {foo}. Такие случаи нормализуются до простейшей формы. В этом случае {foo} изменяется на foo.

Чувствительность к регистру

API шаблонов URL по умолчанию обрабатывает многие части URL как чувствительные к регистру при сопоставлении. В отличие от этого, многие JavaScript-фреймворки клиентской части используют нечувствительное к регистру соответствие URL. Опция ignoreCase доступна в конструкторе URLPattern() для включения нечувствительного к регистру соответствия, если это необходимо.

// Case-sensitive matching by default
const pattern = new URLPattern("https://example.com/2022/feb/*");
console.log(pattern.test("https://example.com/2022/feb/xc44rsz")); // true
console.log(pattern.test("https://example.com/2022/Feb/xc44rsz")); // false

Установка опции ignoreCase в true в конструкторе переключает все операции сопоставления на нечувствительность к регистру для заданного шаблона:

// Case-insensitive matching
const pattern = new URLPattern("https://example.com/2022/feb/*", {
  ignoreCase: true,
});
console.log(pattern.test("https://example.com/2022/feb/xc44rsz")); // true
console.log(pattern.test("https://example.com/2022/Feb/xc44rsz")); // true

Примеры

Фильтр по определенному компоненту URL

В следующем примере показано, как URLPattern фильтрует определенный компонент URL. При вызове конструктора URLPattern() со структурированным объектом шаблонов компонентов любые отсутствующие компоненты по умолчанию принимают значение подстановочного знака *.

// Construct a URLPattern that matches a specific domain and its subdomains.
// All other URL components default to the wildcard `*` pattern.
const pattern = new URLPattern({
  hostname: "{*.}?example.com",
});

console.log(pattern.hostname); // '{*.}?example.com'

console.log(pattern.protocol); // '*'
console.log(pattern.username); // '*'
console.log(pattern.password); // '*'
console.log(pattern.pathname); // '*'
console.log(pattern.search); // '*'
console.log(pattern.hash); // '*'

console.log(pattern.test("https://example.com/foo/bar")); // true

console.log(pattern.test({ hostname: "cdn.example.com" })); // true

console.log(pattern.test("custom-protocol://example.com/other/path?q=1")); // false

// Prints `false` because the hostname component does not match
console.log(pattern.test("https://cdn-example.com/foo/bar"));

END_OF_DOCUMENT_MARKER

Создание URLPattern по полному строковому представлению URL

В следующем примере показано, как создать URLPattern по полному строковому представлению URL с встроенными шаблонами. Например, : может быть одновременно суффиксом протокола URL, например https:, и началом группы именованного шаблона, например :foo. Всё работает без проблем, если нет неоднозначности в том, является ли символ частью синтаксиса URL или частью синтаксиса шаблона.

// Construct a URLPattern that matches URLs to CDN servers loading jpg images.
// URL components not explicitly specified, like search and hash here, result
// in the empty string similar to the URL() constructor.
const pattern = new URLPattern("https://cdn-*.example.com/*.jpg");

console.log(pattern.protocol); // 'https'

console.log(pattern.hostname); // 'cdn-*.example.com'

console.log(pattern.pathname); // '/*.jpg'

console.log(pattern.username); // ''
console.log(pattern.password); // ''
console.log(pattern.search); // ''
console.log(pattern.hash); // ''

// Prints `true`
console.log(
  pattern.test("https://cdn-1234.example.com/product/assets/hero.jpg"),
);

// Prints `false` because the search component does not match
console.log(
  pattern.test("https://cdn-1234.example.com/product/assets/hero.jpg?q=1"),
);

Создание URLPattern со строковым представлением URL, допускающим неоднозначность

В следующем примере показано, как URLPattern, созданный из неоднозначной строки, будет отдавать предпочтение обработке символов как части синтаксиса шаблона. В данном случае символ : может быть суффиксом компоненты протокола, или префиксом для именованной группы в шаблоне. Конструктор выбирает рассматривать его как часть шаблона, и, таким образом, определяет, что это шаблон относительного пути. Поскольку нет базового URL, относительный путь не может быть разрешен, и это вызывает ошибку.

// Throws because this is interpreted as a single relative pathname pattern
// with a ":foo" named group and there is no base URL.
const pattern = new URLPattern("data:foo*");

Экранирование символов для устранения неоднозначности в строках-аргументах конструктора URLPattern

В следующем примере показано, как символ неоднозначной строки-аргумента конструктора можно экранировать, чтобы он обрабатывался как разделитель URL, а не как символ шаблона. Здесь : экранируется как \\:.

// Constructs a URLPattern treating the `:` as the protocol suffix.
const pattern = new URLPattern("data\\:foo*");

console.log(pattern.protocol); // 'data'

console.log(pattern.pathname); // 'foo*'

console.log(pattern.username); // ''
console.log(pattern.password); // ''
console.log(pattern.hostname); // ''
console.log(pattern.port); // ''
console.log(pattern.search); // ''
console.log(pattern.hash); // ''

console.log(pattern.test("data:foobar")); // true

Использование базовых URL для test() и exec()

В следующем примере показано, как test() и exec() могут использовать базовые URL.

const pattern = new URLPattern({ hostname: "example.com", pathname: "/foo/*" });

// Prints `true` as the hostname based in the dictionary `baseURL` property
// matches.
console.log(
  pattern.test({
    pathname: "/foo/bar",
    baseURL: "https://example.com/baz",
  }),
);

// Prints `true` as the hostname in the second argument base URL matches.
console.log(pattern.test("/foo/bar", "https://example.com/baz"));

// Throws because the second argument cannot be passed with a dictionary input.
try {
  pattern.test({ pathname: "/foo/bar" }, "https://example.com/baz");
} catch (e) {}

// The `exec()` method takes the same arguments as `test()`.
const result = pattern.exec("/foo/bar", "https://example.com/baz");

console.log(result.pathname.input); // '/foo/bar'

console.log(result.pathname.groups[0]); // 'bar'

console.log(result.hostname.input); // 'example.com'

Использование базовых URL в конструкторе URLPattern

В следующем примере показано, как базовые URL также могут использоваться для создания URLPattern. Обратите внимание, что базовый URL в этих случаях обрабатывается строго как URL и не может содержать синтаксис шаблона.

Кроме того, поскольку базовый URL предоставляет значение для каждой компоненты, полученный URLPattern также будет иметь значение для каждой компоненты, даже если это пустая строка. Это означает, что вы не получите поведения "по умолчанию по шаблону подстановки" (wildcard).

const pattern1 = new URLPattern({
  pathname: "/foo/*",
  baseURL: "https://example.com",
});

console.log(pattern1.protocol); // 'https'
console.log(pattern1.hostname); // 'example.com'
console.log(pattern1.pathname); // '/foo/*'

console.log(pattern1.username); // ''
console.log(pattern1.password); // ''
console.log(pattern1.port); // ''
console.log(pattern1.search); // ''
console.log(pattern1.hash); // ''

// Equivalent to pattern1
const pattern2 = new URLPattern("/foo/*", "https://example.com");

// Throws because a relative constructor string must have a base URL to resolve
// against.
try {
  const pattern3 = new URLPattern("/foo/*");
} catch (e) {}

Доступ к значениям совпавших групп

В следующем примере показано, как значения входных данных, соответствующие группам шаблона, могут быть позже получены из объекта результата exec(). Без именованных групп им присваиваются индексы последовательно.

const pattern = new URLPattern({ hostname: "*.example.com" });
const result = pattern.exec({ hostname: "cdn.example.com" });

console.log(result.hostname.groups[0]); // 'cdn'

console.log(result.hostname.input); // 'cdn.example.com'

console.log(result.inputs); // [{ hostname: 'cdn.example.com' }]

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

В следующем примере показано, как группам можно присваивать пользовательские имена, которые могут использоваться для доступа к сопоставленному значению в объекте результата.

// Construct a URLPattern using matching groups with custom names. These
// names can then be later used to access the matched values in the result
// object.
const pattern = new URLPattern({ pathname: "/:product/:user/:action" });
const result = pattern.exec({ pathname: "/store/wanderview/view" });

console.log(result.pathname.groups.product); // 'store'
console.log(result.pathname.groups.user); // 'wanderview'
console.log(result.pathname.groups.action); // 'view'

console.log(result.pathname.input); // '/store/wanderview/view'

console.log(result.inputs); // [{ pathname: '/store/wanderview/view' }]

Пользовательские группы регулярных выражений

В следующем примере показано, как группа сопоставления может использовать пользовательское регулярное выражение.

const pattern = new URLPattern({ pathname: "/(foo|bar)" });

console.log(pattern.test({ pathname: "/foo" })); // true
console.log(pattern.test({ pathname: "/bar" })); // true
console.log(pattern.test({ pathname: "/baz" })); // false

const result = pattern.exec({ pathname: "/foo" });

console.log(result.pathname.groups[0]); // 'foo'

Именованная группа с пользовательским регулярным выражением

В следующем примере показано, как использовать пользовательское регулярное выражение с именованной группой.

const pattern = new URLPattern({ pathname: "/:type(foo|bar)" });
const result = pattern.exec({ pathname: "/foo" });

console.log(result.pathname.groups.type); // 'foo'

Делаем группы сопоставления необязательными

В следующем примере показано, как сделать группу сопоставления необязательной, поместив модификатор ? после неё. Для компоненты пути это также заставляет любой предыдущий символ / обрабатываться как необязательный префикс группы.

const pattern = new URLPattern({ pathname: "/product/(index.html)?" });

console.log(pattern.test({ pathname: "/product/index.html" })); // true
console.log(pattern.test({ pathname: "/product" })); // true

const pattern2 = new URLPattern({ pathname: "/product/:action?" });

console.log(pattern2.test({ pathname: "/product/view" })); // true
console.log(pattern2.test({ pathname: "/product" })); // true

// Wildcards can be made optional as well. This may not seem to make sense
// since they already match the empty string, but it also makes the prefix
// `/` optional in a pathname pattern.
const pattern3 = new URLPattern({ pathname: "/product/*?" });

console.log(pattern3.test({ pathname: "/product/wanderview/view" })); // true
console.log(pattern3.test({ pathname: "/product" })); // true
console.log(pattern3.test({ pathname: "/product/" })); // true

Делаем группы сопоставления повторяющимися

В следующем примере показано, как сделать группу сопоставления повторяющейся, поместив модификатор + после неё. В компоненте pathname это также обрабатывает префикс / как специальный. Он повторяется вместе с группой.

const pattern = new URLPattern({ pathname: "/product/:action+" });
const result = pattern.exec({ pathname: "/product/do/some/thing/cool" });

result.pathname.groups.action; // 'do/some/thing/cool'

console.log(pattern.test({ pathname: "/product" })); // false

Делаем группы сопоставления необязательными и повторяющимися

В следующем примере показано, как сделать группу сопоставления одновременно необязательной и повторяющейся. Для этого поместите модификатор * после группы. Опять же, компонент пути обрабатывает префикс / как специальный. Он становится необязательным и также повторяется с группой.

const pattern = new URLPattern({ pathname: "/product/:action*" });
const result = pattern.exec({ pathname: "/product/do/some/thing/cool" });

console.log(result.pathname.groups.action); // 'do/some/thing/cool'

console.log(pattern.test({ pathname: "/product" })); // true

Использование пользовательского префикса или суффикса для модификатора необязательности или повторения

В следующем примере показано, как фигурные скобки могут быть использованы для обозначения пользовательского префикса и/или суффикса, которые будут обрабатываться последующим модификатором ?, *, или +.

const pattern = new URLPattern({ hostname: "{:subdomain.}*example.com" });

console.log(pattern.test({ hostname: "example.com" })); // true
console.log(pattern.test({ hostname: "foo.bar.example.com" })); // true
console.log(pattern.test({ hostname: ".example.com" })); // false

const result = pattern.exec({ hostname: "foo.bar.example.com" });

console.log(result.hostname.groups.subdomain); // 'foo.bar'

Делаем текст необязательным или повторяющимся без именованной группы

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

const pattern = new URLPattern({ pathname: "/product{/}?" });

console.log(pattern.test({ pathname: "/product" })); // true
console.log(pattern.test({ pathname: "/product/" })); // true

const result = pattern.exec({ pathname: "/product/" });

console.log(result.pathname.groups); // {}

Использование нескольких компонентов и функций одновременно

В следующем примере показано, как можно объединить множество функций для нескольких компонентов URL.

const pattern = new URLPattern({
  protocol: "http{s}?",
  username: ":user?",
  password: ":pass?",
  hostname: "{:subdomain.}*example.com",
  pathname: "/product/:action*",
});

const result = pattern.exec(
  "http://foo:bar@sub.example.com/product/view?q=12345",
);

console.log(result.username.groups.user); // 'foo'
console.log(result.password.groups.pass); // 'bar'
console.log(result.hostname.groups.subdomain); // 'sub'
console.log(result.pathname.groups.action); // 'view'

Спецификации

Спецификация
Шаблон URL

Совместимость с браузерами

	Настольный					Мобильный
	Chrome	Edge	Firefox	Opera	Safari	Chrome Android	Firefox для Android	Opera Android	Safari на IOS	Samsung Internet	WebView Android
`URLPattern`	95	95	Нет	81	Нет	95	Нет	67	Нет	17.0	95
`URL_Pattern_API`	95	95	Нет	81	Нет	95	Нет	67	Нет	17.0	95
`exec`	95	95	Нет	81	Нет	95	Нет	67	Нет	17.0	95
`hasRegExpGroups`	122	122	Нет	108	Нет	122	Нет	81	Нет	26.0	122
`hash`	95	95	Нет	81	Нет	95	Нет	67	Нет	17.0	95
`hostname`	95	95	Нет	81	Нет	95	Нет	67	Нет	17.0	95
`password`	95	95	Нет	81	Нет	95	Нет	67	Нет	17.0	95
`pathname`	95	95	Нет	81	Нет	95	Нет	67	Нет	17.0	95
`port`	95	95	Нет	81	Нет	95	Нет	67	Нет	17.0	95
`protocol`	95	95	Нет	81	Нет	95	Нет	67	Нет	17.0	95
`search`	95	95	Нет	81	Нет	95	Нет	67	Нет	17.0	95
`test`	95	95	Нет	81	Нет	95	Нет	67	Нет	17.0	95
`username`	95	95	Нет	81	Нет	95	Нет	67	Нет	17.0	95

См. также

Полифилл для URLPattern доступен на GitHub
Синтаксис шаблонов, используемый URLPattern, похож на синтаксис, используемый path-to-regexp

© 2005–2024 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/API/URL_Pattern_API