HTML-tools

Gratis URLPattern Tester

Test URL-patronen met de URLPattern API — benoemde groepen, wildcards en regex-matching zonder handmatig parsen.

Tool laden...

Wat is URLPattern Tester?

URLPattern is een standaard browser-API die declaratieve URL-matching biedt met benoemde groepen, wildcards en regex-beperkingen. In plaats van foutgevoelige regex-patronen of handmatige padparsing voor URL-routing te schrijven, gebruiken ontwikkelaars new URLPattern('/books/:id') om URL's te matchen en parameters te extraheren op een leesbare, onderhoudbare manier. De API ondersteunt alle URL-componenten —protocol, hostname, port, pathname, search en hash —en handelt URL-codering automatisch af.

Snel antwoord

URLPattern biedt declaratieve URL-matching met benoemde groepen, wildcards en regex-beperkingen —geen regex of handmatige padparsing nodig. Gebruik /books/:id-syntax om URL's te matchen en parameters te extraheren. Native beschikbaar in Chrome 95+, Edge 95+, Safari 15.4+ en Firefox 115+. Ook ondersteund in Deno, Cloudflare Workers en Node.js 21+.

Last updated: 2026-05-31

Beperkingen

URLPattern-browserondersteuning is sterk in Chromium en Safari (15.4+) maar Firefox-ondersteuning kwam pas in versie 115 en de API is nog experimenteel in sommige server-side runtimes. Voeg het urlpattern-polyfill npm-pakket toe voor productie-apps die gericht zijn op oudere browsers of verouderde Node.js-versies.
URLPattern-matching is langzamer dan eenvoudige stringbewerkingen. Voor frequente URL-matching in krappe lussen die duizenden URL's per seconde verwerken, is een gecompileerde regex of trie-gebaseerde router performanter. URLPattern geeft prioriteit aan leesbaarheid boven ruwe doorvoer.
URLPattern ondersteunt geen reverse matching —u kunt geen URL genereren op basis van een patroon en parameters. Het test alleen of een URL matcht en extraheert benoemde groepswaarden. Voor bidirectionele URL-afhandeling bieden bibliotheken zoals path-to-regexp zowel matching als URL-generatie.

Sources:MDN Web Docs · W3C Specifications · jquery.app on GitHub

Zo gebruik je deze tool

Voer een URLPattern-patroontekenreeks in met :param voor benoemde groepen (bijv. /blog/:slug), * voor wildcard-matching (bijv. /api/*) en /:param? voor optionele segmenten. U kunt ook regex-beperkingen toevoegen zoals /users/:id(\d+).
Voeg een of meer test-URL's toe om tegen het patroon te matchen. Elke test-URL wordt onafhankelijk ge毛valueerd, zodat u meerdere paden, queryreeksen en randgevallen in 茅茅n sessie kunt controleren.
Bekijk de live matchresultaten —elke test-URL toont of deze matchte, de ge毛xtraheerde benoemde groepswaarden en eventuele groepen die null of undefined retourneerden voor niet-overeenkomende optionele segmenten.
Kopieer de gegenereerde JavaScript-code die de URLPattern API gebruikt met uw specifieke patroon en test-URL's. De code bevat matchcontroles en parameter-extractielogica die klaar is om in uw project te gebruiken.

Waarvoor je het kunt gebruiken

Implementeer client-side routing in een single-page applicatie met URLPattern in plaats van fragiele regex-parsing. Benoemde groepen maken routeparameters zelfdocumenterend en automatisch URL-gedecodeerd.
Valideer inkomende URL-structuren in een service worker fetch-handler —match verzoek-URL's tegen bekende routepatronen en extraheer parameters voor selectieve caching en responslogica.
Test URL-herstructurering tijdens een sitemigratie —controleer of oude URL-patronen overeenkomen met de verwachte parameters en nieuwe omleidingsregels de juiste padsegmenten vastleggen voordat u naar productie implementeert.

Gebruik

Praktische voorbeelden

Voorbeeld

SPA-route-matching met URLPattern

Een vanilla JavaScript SPA definieert routes zoals /blog/:slug en /products/:category/:id. Gebruik URLPattern om inkomende history.pushState-URL's te matchen. Het patroon /blog/:slug matcht /blog/hello-world en extraheert {slug: 'hello-world'} als benoemde groep. Niet langer splitsen op schuine strepen of fragiele regex schrijven —URLPattern handelt optionele groepen, wildcards en regex-beperkingen declaratief af.

Voorbeeld

Service worker cache-routing

Een service worker moet API-reacties cachen voor /api/posts/:id maar /api/admin/*-paden uitsluiten. Maak een URLPattern met pathname: '/api/posts/:id' en gebruik het in de fetch-eventhandler om selectief overeenkomende verzoeken te cachen. Benoemde groepen maken het eenvoudig om cachesleutels te construeren zoals 'post-' + result.pathname.groups.id.

Veelgemaakte fouten

Vergeten dat URLPattern standaard tegen de volledige URL inclusief origin matcht bij gebruik van een string-constructor. Gebruik new URLPattern({ pathname: '/books/:id' }) om matching te beperken tot alleen de pathname, of neem de verwachte origin op in de patroontekenreeks voor volledige URL-matching.
Aannemen dat URLPattern.exec()-groepswaarden altijd strings zijn —niet-overeenkomende optionele groepen retourneren undefined en wildcard-groepen retourneren een lege string voor matches van nul lengte. Controleer altijd op undefined voordat u ge毛xtraheerde groepswaarden gebruikt in applicatielogica.
URLPattern gebruiken waar eenvoudige stringmethoden volstaan —voor basisvoorvoegsel- of achtervoegselcontroles op bekende statische paden voegt URLPattern onnodige complexiteit en prestatiekosten toe. Gebruik .startsWith(), .includes() of exacte stringvergelijking voor niet-gestructureerde URL-controles.

Verificatie

Open de browserconsole en voer new URLPattern({ pathname: '/test/:id' }).exec('https://example.com/test/123') uit. Controleer of het resultaatobject pathname.groups.id bevat met waarde '123' en dat het resultaat niet null is.
Test randgevallen: een niet-overeenkomende URL retourneert null (geen fout), een optionele groep zoals /:id? retourneert undefined wanneer het segment wordt weggelaten en een wildcardpatroon /files/* legt het resterende pad vast in de wildcardgroep die toegankelijk is via result.pathname.groups[0].

FAQ

Vragen over URLPattern Tester

Hoe verschilt URLPattern van het gebruik van regex voor URL-matching?

URLPattern is declaratief en zelfdocumenterend: /users/:id is direct leesbaar, terwijl /^\/users\/(\d+)$/ parsing vereist. URLPattern handelt URL-codering automatisch af (%2F in padsegmenten), ondersteunt benoemde groepen voor leesbare parameterextractie en verwerkt correct optionele groepen, wildcards en regex-beperkingen. Het biedt ook een consistente API in browser-, Deno- en Cloudflare Workers-omgevingen.

Kan URLPattern queryreeksen en hash-fragmenten matchen?

Ja. URLPattern ondersteunt matching tegen alle URL-componenten, inclusief search (queryreeks) en hash. Gebruik new URLPattern({ pathname: '/search', search: 'q=:query' }) om queryparameters op naam te extraheren. Wildcards in de search-component laten u aanvullende parameters matchen: 'q=:query&*' matcht extra queryparameters na de q-parameter.

Werkt URLPattern in Node.js en server-side runtimes?

URLPattern is native beschikbaar in Chrome 95+, Edge 95+, Safari 15.4+ en Firefox 115+. Op de server is URLPattern ingebouwd in Deno en Cloudflare Workers. In Node.js is URLPattern beschikbaar via het urlpattern-polyfill npm-pakket of native in Node.js 21+ met de --experimental-url-vlag. Bun ondersteunt URLPattern native zonder vlaggen of polyfills.

Kan ik regex gebruiken in URLPattern-benoemde groepen?

Ja. URLPattern ondersteunt regex-beperkingen binnen benoemde groepen met behulp van tussen haakjes geplaatste patronen: /users/:id(\d+) matcht alleen numerieke ID's terwijl /posts/:slug([a-z0-9-]+) kleine letters slug-strings matcht. Regex-beperkingen laten u gematchte waarden verfijnen zonder validatie achteraf. De regex wordt toegepast op het gematchte padsegment, niet op de volledige URL.

Gerelateerde tools