URL Pattern API

URL Pattern API Baseline 2025 Newly available Since ⁨September 2025⁩, this feature works across the latest devices and browser versions. This feature might not work in older devices or browsers. Note: This feature is available in Web Workers . 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. 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. Named groups ( /books/:id ) 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. groups ( RegExp /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 property indicates whether or not regular expression groups are used. hasRegExpGroups 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. // 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' } Segment wildcard By default, a group matching the pathname part of the URL will match all characters but the forward slash ( / ). In the hostname part, the group will match all characters except the dot ( . ). In all other parts, the group will match all characters. The segment wildcard is non-greedy, meaning that it will match the shortest possible string. Regex matchers Instead of using the default match rules for a group, you can specify a regex for each group by specifying it in parentheses. This regex defines the matching rules for the group. Below is an example of a regex matcher on a named group that constrains the group to only match if it contains one or more digits: const pattern1 = new URLPattern("/books/:id(\\d+)", "https://example.com"); console.log(pattern1.test("https://example.com/books/123")); // true console.log(pattern1.test("https://example.com/books/abc")); // false console.log(pattern1.test("https://example.com/books/")); // false...

Preview: ~500 words