La API URLPattern: Coincidencia de URLs de Forma Moderna

Si alguna vez has escrito una expresión regular para extraer un ID de usuario de una ruta URL, conoces el dolor. El patrón comienza simple, luego crece hasta convertirse en un desorden ilegible de caracteres de escape y grupos de captura. Cuando los requisitos cambian, estás depurando regex en lugar de construir funcionalidades.

La API URLPattern ofrece un mejor enfoque. Es un estándar WHATWG para la coincidencia moderna de URLs que funciona nativamente en navegadores, permitiéndote hacer coincidir y analizar URLs con patrones legibles en lugar de regex crípticos. Este artículo cubre qué problemas resuelve URLPattern, sus conceptos fundamentales y cuándo los desarrolladores frontend deberían recurrir a ella.

¿Qué Problema Resuelve URLPattern?

Antes de URLPattern, los desarrolladores tenían dos opciones principales para el análisis de URLs web: escribir expresiones regulares personalizadas o incorporar bibliotecas de enrutamiento.

Las expresiones regulares funcionan pero crean dolores de cabeza de mantenimiento. Un patrón como /^\/users\/([a-zA-Z0-9]+)\/?$/ requiere análisis mental cada vez que lo revisitas. Los grupos de captura son posicionales y anónimos—si agregas un nuevo segmento, el código existente se rompe.

Las bibliotecas de enrutamiento resuelven el problema de legibilidad pero añaden peso al bundle e introducen sintaxis específica del framework. Tu lógica de coincidencia de URLs queda vinculada a una herramienta particular.

URLPattern proporciona un punto medio estandarizado. Utiliza una sintaxis intuitiva tomada de convenciones de enrutamiento populares:

const pattern = new URLPattern({ pathname: '/users/:id' })

El segmento :id es un grupo nombrado. Sin caracteres de escape. Sin grupos de captura numerados. El patrón se lee como la estructura de URL que coincide.

Conceptos Fundamentales de la API URLPattern

Los Patrones Abarcan URLs Completas o Componentes Individuales

URLPattern puede hacer coincidir URLs completas o componentes específicos. Una URL se divide en ocho partes: protocolo, nombre de usuario, contraseña, hostname, puerto, pathname, search y hash.

Puedes definir patrones para cualquier combinación:

const pattern = new URLPattern({
  hostname: '*.example.com',
  pathname: '/api/:version/*'
})

Esto coincide con cualquier subdominio de example.com con una ruta de API. Los componentes que no especifiques tienen comodines por defecto, coincidiendo con cualquier cosa.

Prueba vs. Extracción de Grupos Estructurados

URLPattern ofrece dos métodos principales con propósitos distintos.

El método test() devuelve un booleano—¿coincide esta URL con el patrón?

pattern.test('https://api.example.com/api/v2/users') // true

El método exec() devuelve resultados de coincidencia detallados, incluyendo grupos capturados:

const result = pattern.exec('https://api.example.com/api/v2/users')
console.log(result.pathname.groups.version) // 'v2'

Los grupos nombrados se convierten en propiedades de objeto. No más acceder a result[1] y esperar que el índice sea correcto.

Soporte de URLPattern en Navegadores

URLPattern alcanzó el estado Baseline Newly Available a finales de 2025. Chrome, Edge, Firefox y Safari lo soportan. Ya no es una característica experimental o una API exclusiva de Chrome—es un estándar web estable que puedes usar en producción.

Para JavaScript del lado del servidor, la situación difiere. Las versiones recientes de Node.js 23+ incluyen URLPattern, pero la implementación permanece experimental según la documentación oficial. Si estás escribiendo código que se ejecuta en ambos entornos, verifica el comportamiento de Node.js por separado de las expectativas del navegador.

Cuándo Usar URLPattern

URLPattern brilla como una primitiva de bajo nivel, no como una solución de enrutamiento completa. Considérala para:

Service workers que necesitan interceptar solicitudes y aplicar diferentes estrategias de caché basadas en patrones de URL.

Lógica de enrutamiento SPA donde estás construyendo manejo de navegación personalizado o necesitas coincidencia de URLs fuera del router de tu framework.

Estado de UI basado en URLs cuando los componentes necesitan analizar la URL actual y extraer parámetros.

URLPattern no reemplazará a React Router o Vue Router. Esos frameworks proporcionan guardias de navegación, carga diferida e integración con ciclos de vida de componentes. URLPattern maneja una cosa bien: hacer coincidir URLs contra patrones y extraer datos.

Una Comparación Práctica

Considera extraer una categoría y un ID de /products/electronics/123.

Con regex:

const match = /^\/products\/([^/]+)\/(\d+)$/.exec(pathname)
const category = match?.[1]
const id = match?.[2]

Con URLPattern:

const pattern = new URLPattern({ pathname: '/products/:category/:id' })
const result = pattern.exec({ pathname })
const { category, id } = result?.pathname.groups ?? {}

La versión con URLPattern es más larga pero autodocumentada. Seis meses después, entenderás qué hace sin decodificar regex.

Conclusión

URLPattern estandariza la coincidencia de URLs en navegadores con una sintaxis limpia y legible. Extrae parámetros nombrados sin complejidad de regex y funciona consistentemente ya sea que estés coincidiendo pathnames, hostnames o URLs completas.

Para desarrolladores frontend que construyen SPAs, service workers o cualquier funcionalidad basada en URLs, URLPattern proporciona una base a prueba de futuro. Consulta la documentación de URLPattern en MDN para la referencia completa de sintaxis y comienza a reemplazar esos patrones regex con algo mantenible.

Preguntas Frecuentes

Understand every bug

Uncover frustrations, understand bugs and fix slowdowns like never before with OpenReplay — the open-source session replay tool for developers. Self-host it in minutes, and have complete control over your customer data. Check our GitHub repo and join the thousands of developers in our community.