Diagrama de ferrocarril de regex

Cómo visualizar una expresión regular

1. Escribe o pega tu patrón en Expresión regular. También puedes pegar un literal completo de JavaScript como /^\d{3}-\d{4}$/gm: las barras se eliminan y los flags pasan automáticamente a su casilla.
2. Añade los flags que necesites (cualquiera de d g i m s u v y). Los flags cambian cómo se dibujan algunas partes: con m, ^ y $ pasan a ser «inicio de línea» y «fin de línea»; con s, el punto pasa a ser «cualquier carácter».
3. El diagrama se actualiza mientras escribes. Dibujar diagrama lo vuelve a dibujar cuando quieras y Siguiente ejemplo recorre varios patrones habituales (correo electrónico, número de teléfono, color hexadecimal, precio, etiqueta HTML, URL).
4. Lee el diagrama de izquierda a derecha, desde el punto relleno hasta el punto con anillo. Cada camino que puedas recorrer es una cadena que el patrón puede reconocer.
5. Usa Descargar SVG para obtener una imagen vectorial nítida (documentación, presentaciones), Descargar PNG para una imagen a doble resolución o Copiar código SVG para pegar el marcado en una página web.

Pasa el ratón por encima de un recuadro para ver de qué parte del patrón procede y su posición.

Cómo leer un diagrama de ferrocarril

Los diagramas de ferrocarril (railroad diagrams), también llamados diagramas sintácticos, describen una gramática como un conjunto de vías. Una expresión regular es justamente una gramática de ese tipo, así que el dibujo muestra su estructura mucho mejor que una línea densa de símbolos:

• Los recuadros azules son texto literal que debe aparecer tal cual, por ejemplo «@».
• Los recuadros verdes son tipos de caracteres (\d dígito, \w carácter de palabra, . cualquier carácter…) y clases de caracteres. Una clase como [\w.+-] se convierte en un recuadro titulado «uno de» que enumera cada elemento; una clase negada [^…] aparece en rojo con el título «ninguno de».
• Las píldoras moradas son anclas y límites: inicio y fin del texto o de la línea, \b límite de palabra. Reconocen una posición, no un carácter.
• Los recuadros naranjas discontinuos son referencias inversas como \1 o \k<name>: el mismo texto que capturó antes un grupo.
• Los marcos discontinuos son grupos. Los grupos de captura se numeran según el orden de su paréntesis de apertura («grupo #2 “domain”»); los grupos sin captura (?:…) no llevan marco. Los lookahead y lookbehind llevan un marco rosa con la etiqueta «seguido de» o «precedido de», porque comprueban el texto sin consumirlo.
• Las vías paralelas son alternativas separadas por |.
• Una vía por encima de un elemento permite saltarlo (?, *, {0,n}). Una vía por debajo con flecha vuelve atrás para repetirlo (+, *, {n,m}). Las repeticiones distintas de las habituales se indican bajo el bucle, como «de 2 a 5 veces», y los cuantificadores perezosos (+?, *?) se marcan como «perezoso».

Mensajes de error con posición

El patrón lo comprueba el propio motor de expresiones regulares JavaScript de tu navegador, así que esta herramienta acepta exactamente lo mismo que new RegExp() con los mismos flags. Cuando el motor lo rechaza, la herramienta señala el carácter problemático con su posición y un circunflejo bajo el patrón. Reconoce un ) sin pareja, un grupo que nunca se cierra, una clase de caracteres sin su ], un cuantificador sin nada que repetir (*a, a|+), una barra invertida suelta al final y cuantificadores {n,m} en los que n es mayor que m. Otros errores, como una referencia inversa a un nombre de grupo que no existe, se muestran con el mensaje del navegador.

La expresión solo se compila para validarla: nunca se ejecuta sobre ningún texto y nada sale de tu navegador.