The URL Pattern API defines a syntax that is used to create URL pattern matchers. These patterns can be matched against URLs or individual URL components.
Since September 2025, this feature works across the latest devices and browser versions. This feature might not work in older devices or browsers.
Concepts and usage Patterns are specified using the URLPattern interface. The pattern syntax is based on the syntax from the path-to-regexp library. Patterns can contain: Literal strings which will be matched exactly.
Wildcards ( /posts/* ) that match any character.
) that match any character. Named groups ( /books/:id ) which extract a part of the matched URL.
) which extract a part of the matched URL. Non-capturing groups ( /books{/old}? ) which make parts of a pattern optional or be matched multiple times.
) which make parts of a pattern optional or be matched multiple times. RegExp groups ( /books/(\\d+) ) which make arbitrarily complex regex matches. Note that the parentheses are not part of the regex but instead define their contents as a regex. Some APIs prohibit the use of regular expression groups in URLPattern objects. The hasRegExpGroups property indicates whether or not regular expression groups are used. You can find details about the syntax in the pattern syntax section below.
Interfaces URLPattern Represents a pattern that can match URLs or parts of URLs. The pattern can contain capturing groups that extract parts of the matched URL.
Pattern syntax The syntax for patterns is based on the path-to-regexp JavaScript library. This syntax is similar to the one used in Ruby on Rails, or JavaScript frameworks like Express or Next.js.
Fixed text and capture groups Each pattern can contain a combination of fixed text and groups. The fixed text is a sequence of characters that is matched exactly. Groups match an arbitrary string based on matching rules. Each URL part has its own default rules that are explained below, but they can be overwritten. js // 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); // {} js // 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' }
... continue reading