HTML-Tools

Kostenlose URLPattern Tester

Testen Sie URL-Muster mit der URLPattern-API — benannte Gruppen, Wildcards und Regex-Abgleich ohne manuelles Parsen.

Tool wird geladen...

Was ist URLPattern Tester?

URLPattern is a standard browser API that provides declarative URL matching with named groups, wildcards, and regex constraints. Instead of writing error-prone regex patterns or manual path parsing for URL routing, developers use new URLPattern('/books/:id') to match URLs and extract parameters in a readable, maintainable way. The API supports all URL components - protocol, hostname, port, pathname, search, and hash - and handles URL encoding automatically.

Kurze Antwort

URLPattern provides declarative URL matching with named groups, wildcards, and regex constraints - no regex or manual path parsing needed. Use /books/:id syntax to match URLs and extract parameters. Available natively in Chrome 95+, Edge 95+, Safari 15.4+, and Firefox 115+. Also supported in Deno, Cloudflare Workers, and Node.js 21+.

Einschränkungen

URLPattern browser support is strong in Chromium and Safari (15.4+) but Firefox support arrived only in version 115 and the API is still experimental in some server-side runtimes. Include the urlpattern-polyfill npm package for production apps targeting older browsers or legacy Node.js versions.
URLPattern matching is slower than simple string operations. For high-frequency URL matching in tight loops processing thousands of URLs per second, a compiled regex or trie-based router is more performant. URLPattern prioritizes readability over raw throughput.
URLPattern does not support reverse matching - you cannot generate a URL from a pattern and parameters. It only tests whether a URL matches and extracts named group values. For bidirectional URL handling, libraries like path-to-regexp offer both matching and URL generation.

So nutzt du dieses Tool

Enter a URLPattern pattern string using :param for named groups (e.g., /blog/:slug), * for wildcard matching (e.g., /api/*), and /:param? for optional segments. You can also add regex constraints like /users/:id(\d+).
Add one or more test URLs to match against the pattern. Each test URL is evaluated independently so you can check multiple paths, query strings, and edge cases in a single session.
Review the live match results - each test URL shows whether it matched, the extracted named group values, and any groups that returned null or undefined for unmatched optional segments.
Copy the generated JavaScript code that uses the URLPattern API with your specific pattern and test URLs. The code includes match checks and parameter extraction logic ready to drop into your project.

Wofür du es nutzen kannst

Implement client-side routing in a single-page application using URLPattern instead of fragile regex parsing. Named groups make route parameters self-documenting and automatically URL-decoded.
Validate incoming URL structures in a service worker fetch handler - match request URLs against known route patterns and extract parameters for selective caching and response logic.
Test URL restructuring during a site migration - verify that old URL patterns match the expected parameters and new redirect rules capture the correct path segments before deploying to production.

Anwendungsfalle

Praxisbeispiele

Beispiel

SPA route matching with URLPattern

A vanilla JavaScript SPA defines routes like /blog/:slug and /products/:category/:id. Use URLPattern to match incoming history.pushState URLs. The pattern /blog/:slug matches /blog/hello-world and extracts {slug: 'hello-world'} as a named group. No more splitting on slashes or writing fragile regex - URLPattern handles optional groups, wildcards, and regex constraints declaratively.

Beispiel

Service worker cache routing

A service worker needs to cache API responses for /api/posts/:id but exclude /api/admin/* paths. Create a URLPattern with pathname: '/api/posts/:id' and use it in the fetch event handler to selectively cache matching requests. Named groups make it easy to construct cache keys like 'post-' + result.pathname.groups.id.

Haufige Fehler

Forgetting that URLPattern matches against the full URL including origin by default when using a string constructor. Use new URLPattern({ pathname: '/books/:id' }) to restrict matching to the pathname only, or include the expected origin in the pattern string for full-URL matching.
Assuming URLPattern.exec() group values are always strings - unmatched optional groups return undefined, and wildcard groups return empty string for zero-length matches. Always check for undefined before using extracted group values in application logic.
Using URLPattern where simple string methods suffice - for basic prefix or suffix checks on known static paths, URLPattern adds unnecessary complexity and performance cost. Use .startsWith(), .includes(), or exact string comparison for non-patterned URL checks.

Überprüfung

Open the browser console and run new URLPattern({ pathname: '/test/:id' }).exec('https://example.com/test/123'). Verify the result object contains pathname.groups.id with value '123' and that the result is not null.
Test edge cases: an unmatched URL returns null (not an error), an optional group like /:id? returns undefined when the segment is omitted, and a wildcard pattern /files/* captures the remaining path into the wildcard group accessible via result.pathname.groups[0].

FAQ

Fragen zu URLPattern Tester

How does URLPattern differ from using regex for URL matching?

URLPattern is declarative and self-documenting: /users/:id is immediately readable, while /^\/users\/(\d+)$/ requires parsing. URLPattern handles URL encoding automatically (%2F in path segments), supports named groups for readable parameter extraction, and correctly handles optional groups, wildcards, and regex constraints. It also provides a consistent API across browser, Deno, and Cloudflare Workers environments.

Can URLPattern match query strings and hash fragments?

Yes. URLPattern supports matching against all URL components including search (query string) and hash. Use new URLPattern({ pathname: '/search', search: 'q=:query' }) to extract query parameters by name. Wildcards in the search component let you match additional parameters: 'q=:query&*' matches any extra query parameters after the q parameter.

Does URLPattern work in Node.js and server-side runtimes?

URLPattern is available natively in Chrome 95+, Edge 95+, Safari 15.4+, and Firefox 115+. On the server, URLPattern is built into Deno and Cloudflare Workers. In Node.js, URLPattern is available via the urlpattern-polyfill npm package or natively in Node.js 21+ with the --experimental-url flag. Bun supports URLPattern natively without flags or polyfills.

Can I use regex inside URLPattern named groups?

Yes. URLPattern supports regex constraints within named groups using parenthesized patterns: /users/:id(\d+) matches only numeric IDs while /posts/:slug([a-z0-9-]+) matches lowercase slug strings. Regex constraints let you narrow matched values without post-processing validation. The regex is applied to the matched path segment, not the full URL.

Verwandte Tools