Explicador de Regex

Qué hace

El Explicador de Regex convierte una expresión regular en un desglose token a token, en lenguaje claro. Cada token - ancla, clase de caracteres, cuantificador, grupo, escape, alternancia o literal - tiene su propia fila con el fragmento exacto y qué coincide, más un conteo de tokens y una explicación de cada bandera que actives. Los patrones inválidos muestran el propio error del motor JavaScript en un cuadro rojo de error en lugar de romper la página. Ideal para aprender regex o descifrar una que encontraste en un código. 100% en el cliente; nada se envía a ninguna parte.

Cómo usarlo

1. Introduce un Patrón (sin delimitadores). El desglose se actualiza mientras escribes.
2. Opcionalmente fija las Banderas - el campo acepta g i m s u d y; cualquier otro carácter se elimina.
3. O pulsa un chip de ejemplo - Email, Date capture, URL, Lookahead - para cargar un patrón listo con sus banderas.
4. Lee el informe a la derecha (fijo en escritorio): una fila por token, la insignia con el conteo de tokens arriba, y cada bandera activa con su significado.
5. Copiar desglose copia la explicación completa como texto plano; la barra de direcciones siempre lleva tu patrón (?p= y ?f=), así que copiar la URL comparte la vista exacta.

Una regex inválida (p. ej. un [ sin terminar) muestra el mensaje de error del motor - Invalid regular expression: missing terminating ] for character class para [ - con una insignia Inválido, y nunca lanza una excepción.

Ejemplos

Todas las explicaciones de abajo son la salida real de la herramienta para cada entrada.

Patrón tipo teléfono - ^\d{3}-\d{4}$ con bandera g (el Ejemplo integrado, 7 tokens):

Token	Explicación
^	start of the string (or line with /m)
\d	a digit [0-9]
{3}	quantifier - repeat 3 time(s)
-	the literal “-”
\d	a digit [0-9]
{4}	quantifier - repeat 4 time(s)
$	end of the string (or line with /m)

Bandera g → global - find all matches.

Patrón tipo email - [a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-z]{2,} con banderas gi (el chip Email, 8 tokens), extracto:

• [a-zA-Z0-9._%+-] → match any of: a-zA-Z0-9._%+-
• + → quantifier - 1 or more times (greedy)
• @ → the literal "@"
• \. → an escaped literal "."
• {2,} → quantifier - repeat 2, time(s)
• Bandera i → case-insensitive

Captura de fecha - (\d{4})-(\d{2})-(\d{2}) (el chip Date capture, 5 tokens): tres filas de capturing group (para (\d{4}), (\d{2}), (\d{2})) separadas por dos filas de the literal "-".

Lookahead - \d+(?=px) (el chip Lookahead, 3 tokens): a digit [0-9], quantifier - 1 or more times (greedy), luego (?=px) → lookahead assertion (positive).

Buen saber

• Referencia de banderas (cada bandera muestra su significado junto a su letra): g global - find all matches · i case-insensitive · m multiline (^ and $ match line boundaries) · s dotAll - “.” matches newlines · u unicode · y sticky - match at lastIndex · d indices - expose match boundaries.
• Admite la sintaxis RegExp de JS; las extensiones de otros motores (clases POSIX, \p{...} sin u) pueden interpretarse de forma distinta.
• Privado: el parseo es totalmente local, en tu navegador.
• Herramientas relacionadas: Regex Tester (ejecuta coincidencias en vivo), Find & Replace, JSON to TypeScript.