A standard tool for URL matching
Developers who need to react to URL changes have historically had two options: hand-write complex regular expressions or pull in a third-party routing library. The URL Pattern API, now Baseline Newly available, offers a third path: a standardized pattern syntax built into the browser. It provides a URLPattern interface with .exec() and .test() methods for matching URLs and extracting data.
Less code than regex-plus-URL
Before URLPattern, basic matching meant parsing a URL with the URL interface, then applying a separate regular expression to the .pathname property. That approach required more code and was harder to read. With URLPattern, the same task composes down to constructing a pattern and testing against it directly.
The API also improves on the old way of pulling dynamic parameters out of a URL. Numbered regular expression capture groups are positional and anonymous, forcing access via array indexes like result[1] and result[2]. That is brittle if the order of capture groups changes. URLPattern instead returns a structured groups object with named parameters, where the names map directly to keys in the result.
Multipart matches without multiple checks
Composing multipart URL matches used to require the URL constructor to split a URL into hostname, pathname, and other parts, then running separate checks or regexes on each. URLPattern handles this natively in a single pattern with predictable controls, so you can match across the host, path, and other components without the intermediate parsing steps.
Removing a dependency
Routing logic in many codebases has been delegated to a third-party library bundled into the application. Because URLPattern is now Baseline Newly available, that work can be done with zero dependencies. The functionality is built into the browser, which reduces bundle size, removes a dependency to manage, and relies on a native implementation that works across all major browser engines.
Use cases in practice
URLPattern is designed to cover both simple and advanced scenarios, so you can start with basic path matching and add features as needed.
Client-side routing and parameter extraction
A common pattern in client-side routing is checking whether a URL matches a route and then pulling out dynamic segments. URLPattern handles both steps cleanly with .test() for the check and .exec() for extraction.
Subdomain and hostname matching
Unlike many routing libraries, URLPattern is a full URL matcher. That makes it useful for apps that behave differently depending on hostname, such as routing API requests to a specific api subdomain. You can create a pattern that only matches that subdomain plus a particular path.
Wildcards and embedded regex
When named groups alone are not flexible enough, URLPattern supports wildcards (*) and allows embedding regular expressions directly into patterns. For example, you can write a pattern that matches any image file under a user's asset folder while also constraining the user ID to a number.
Service worker routing
Service workers are a particularly good fit for URLPattern. Intercepting fetch requests and choosing a caching strategy can be expressed with clean patterns instead of messy regexes or conditionals built on url.includes().
The URL Pattern API has more capabilities than those covered here. For full reference details, see the documentation on MDN Web Docs.
