Herramientas HTML

Gratis Probador de URLPattern

Pruebe patrones de URL con la API URLPattern — grupos nombrados, comodines y coincidencia regex sin analisis manual.

Cargando herramienta...

Qué es Probador de URLPattern?

URLPattern es una API de navegador estándar que proporciona coincidencia declarativa de URLs con grupos nombrados, comodines y restricciones regex. En lugar de escribir patrones regex propensos a errores o análisis manual de rutas para enrutamiento de URLs, los desarrolladores usan new URLPattern('/books/:id') para coincidir URLs y extraer parámetros de manera legible y mantenible. La API soporta todos los componentes de URL (protocolo, hostname, puerto, pathname, búsqueda y hash) y maneja la codificación URL automáticamente.

Respuesta rápida

URLPattern proporciona coincidencia declarativa de URLs con grupos nombrados, comodines y restricciones regex: no necesita regex ni análisis manual de rutas. Use la sintaxis /books/:id para coincidir URLs y extraer parámetros. Disponible nativamente en Chrome 95+, Edge 95+, Safari 15.4+ y Firefox 115+. También compatible con Deno, Cloudflare Workers y Node.js 21+.

Last updated: 2026-05-31

Limitaciones

El soporte de URLPattern en navegadores es sólido en Chromium y Safari (15.4+) pero el soporte de Firefox llegó solo en la versión 115 y la API aún es experimental en algunos entornos de ejecución del lado del servidor. Incluya el paquete npm urlpattern-polyfill para aplicaciones de producción dirigidas a navegadores antiguos o versiones heredadas de Node.js.
La coincidencia de URLPattern es más lenta que las operaciones simples de cadena. Para coincidencia de URLs de alta frecuencia en bucles ajustados que procesan miles de URLs por segundo, un regex compilado o un enrutador basado en trie es más eficiente.
URLPattern no soporta coincidencia inversa: no puede generar una URL a partir de un patrón y parámetros. Solo prueba si una URL coincide y extrae valores de grupos nombrados. Para manejo bidireccional de URLs, bibliotecas como path-to-regexp ofrecen tanto coincidencia como generación de URLs.

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

Cómo usar esta herramienta

Ingrese una cadena de patrón URLPattern usando :param para grupos nombrados (ej. /blog/:slug), * para coincidencia comodín (ej. /api/*) y /:param? para segmentos opcionales. También puede añadir restricciones regex como /users/:id(\d+).
Añada una o más URLs de prueba para comparar con el patrón. Cada URL de prueba se evalúa independientemente para que pueda verificar múltiples rutas, cadenas de consulta y casos límite en una sola sesión.
Revise los resultados de coincidencia en vivo: cada URL de prueba muestra si coincidió, los valores de grupos nombrados extraídos y cualquier grupo que devolvió null o undefined para segmentos opcionales no coincidentes.
Copie el código JavaScript generado que usa la API URLPattern con su patrón específico y URLs de prueba. El código incluye verificaciones de coincidencia y lógica de extracción de parámetros lista para incorporar a su proyecto.

Para qué puedes usarla

Implementar enrutamiento del lado del cliente en una aplicación de una sola página usando URLPattern en lugar de análisis regex frágil. Los grupos nombrados hacen que los parámetros de ruta sean autodocumentados y decodificados automáticamente.
Validar estructuras de URL entrantes en un handler fetch de service worker: coincidir URLs de solicitud con patrones de ruta conocidos y extraer parámetros para caché selectiva y lógica de respuesta.
Probar la reestructuración de URLs durante una migración de sitio: verificar que los patrones de URL antiguos coincidan con los parámetros esperados y que las nuevas reglas de redirección capturen los segmentos de ruta correctos antes de implementar en producción.

Casos de uso

Ejemplos prácticos

Ejemplo

Coincidencia de rutas SPA con URLPattern

Un SPA de JavaScript vanilla define rutas como /blog/:slug y /products/:category/:id. Use URLPattern para coincidir URLs entrantes de history.pushState. El patrón /blog/:slug coincide con /blog/hello-world y extrae {slug: 'hello-world'} como grupo nombrado. No más división por barras ni escritura de regex frágiles: URLPattern maneja grupos opcionales, comodines y restricciones regex declarativamente.

Ejemplo

Enrutamiento de caché en service worker

Un service worker necesita almacenar en caché respuestas API para /api/posts/:id pero excluir rutas /api/admin/*. Cree un URLPattern con pathname: '/api/posts/:id' y úselo en el handler del evento fetch para almacenar en caché selectivamente las solicitudes coincidentes. Los grupos nombrados facilitan la construcción de claves de caché como 'post-' + result.pathname.groups.id.

Errores comunes

Olvidar que URLPattern coincide con la URL completa incluyendo el origen por defecto cuando se usa un constructor de cadena. Use new URLPattern({ pathname: '/books/:id' }) para restringir la coincidencia solo al pathname, o incluya el origen esperado en la cadena del patrón para coincidencia de URL completa.
Asumir que los valores de grupo de URLPattern.exec() son siempre cadenas: los grupos opcionales no coincidentes devuelven undefined, y los grupos comodín devuelven cadena vacía para coincidencias de longitud cero. Verifique siempre si hay undefined antes de usar valores de grupo extraídos en la lógica de la aplicación.
Usar URLPattern donde bastan métodos simples de cadena: para verificaciones básicas de prefijo o sufijo en rutas estáticas conocidas, URLPattern añade complejidad y costo de rendimiento innecesarios.

Verificación

Abra la consola del navegador y ejecute new URLPattern({ pathname: '/test/:id' }).exec('https://example.com/test/123'). Verifique que el objeto de resultado contenga pathname.groups.id con valor '123' y que el resultado no sea null.
Pruebe casos límite: una URL no coincidente devuelve null (no un error), un grupo opcional como /:id? devuelve undefined cuando el segmento se omite, y un patrón comodín /files/* captura la ruta restante en el grupo comodín accesible mediante result.pathname.groups[0].

FAQ

Preguntas sobre Probador de URLPattern

¿En qué se diferencia URLPattern de usar regex para coincidencia de URLs?

URLPattern es declarativo y autodocumentado: /users/:id es inmediatamente legible, mientras que /^\/users\/(\d+)$/ requiere análisis. URLPattern maneja la codificación URL automáticamente (%2F en segmentos de ruta), soporta grupos nombrados para extracción legible de parámetros y maneja correctamente grupos opcionales, comodines y restricciones regex. También proporciona una API consistente en los entornos de navegador, Deno y Cloudflare Workers.

¿Puede URLPattern coincidir con cadenas de consulta y fragmentos hash?

Sí. URLPattern soporta coincidencia contra todos los componentes de URL incluyendo search (cadena de consulta) y hash. Use new URLPattern({ pathname: '/search', search: 'q=:query' }) para extraer parámetros de consulta por nombre. Los comodines en el componente search le permiten coincidir parámetros adicionales: 'q=:query&*' coincide con cualquier parámetro de consulta extra después del parámetro q.

¿Funciona URLPattern en Node.js y entornos de ejecución del lado del servidor?

URLPattern está disponible nativamente en Chrome 95+, Edge 95+, Safari 15.4+ y Firefox 115+. En el servidor, URLPattern está integrado en Deno y Cloudflare Workers. En Node.js, URLPattern está disponible mediante el paquete npm urlpattern-polyfill o nativamente en Node.js 21+ con la bandera --experimental-url. Bun soporta URLPattern nativamente sin banderas ni polyfills.

¿Puedo usar regex dentro de grupos nombrados de URLPattern?

Sí. URLPattern soporta restricciones regex dentro de grupos nombrados usando patrones entre paréntesis: /users/:id(\d+) coincide solo con IDs numéricos mientras que /posts/:slug([a-z0-9-]+) coincide con cadenas slug en minúsculas. Las restricciones regex le permiten reducir los valores coincidentes sin validación posterior al procesamiento. El regex se aplica al segmento de ruta coincidente, no a la URL completa.

Herramientas relacionadas