Utilo

Visualizador de regex

Visualiza expresiones regulares como diagramas de ferrocarril, lee una explicación en lenguaje sencillo de cada token, prueba coincidencias y copia código para JavaScript, Python, Go, Java, C#, PHP y Rust.

Lo que hace este visualizador de regex

Las expresiones regulares son escritas solo para la mayoría de la gente: fáciles de escribir, difíciles de leer una semana después. Esta herramienta analiza su patrón en un árbol de sintaxis y lo muestra de tres maneras. Un diagrama de ferrocarril dibuja el patrón como una vía que se puede seguir de izquierda a derecha, con ramas para la alternancia, bucles para la repetición y cajas etiquetadas para los grupos. Una explicación en lenguaje sencillo recorre cada token ("uno o más dígitos", "año del grupo nombrado", "no seguido por"). Y los fragmentos de código muestran cómo usar el patrón exacto con el escape correcto en JavaScript, Python, Go, Java, C #, PHP y Rust. Una cadena de pruebas en vivo resalta coincidencias mientras escribe.

Cómo usarlo

  1. Escriba o pegue un patrón. Puedes incluir barra y banderas como /^\d{4}-\d{2}$/gm o ingresar las banderas por separado.
  2. Sigue el diagrama del ferrocarril para ver la forma general del patrón.
  3. Lea la lista de explicaciones para una descripción de token por token.
  4. Introduzca una cadena de prueba para ver qué coincide y qué grupos capturan qué.
  5. Copia un fragmento ya hecho en tu idioma.

Leyendo el diagrama del ferrocarril

  • Las casillas redondeadas son texto literal; las casillas cuadradas son clases de caracteres como digit o uno de az.
  • Una trayectoria que se divide en rieles paralelos es una alternancia (a|b).
  • Un carril que se vuelve debajo de una caja significa "repetir"; un carril que pasa por alto la caja significa "opcional".
  • Los cuadros marcados son grupos; los grupos de captura están numerados y los grupos nombrados muestran su nombre.
  • Los miradores se dibujan como marcos etiquetados porque revisan el texto sin consumirlo.

Consejos

  • Prefiero \d y clases de caracteres sobre las alternativas largas para la velocidad y la claridad.
  • Los cuantificadores perezosos (*?, +?) se muestran con "lo menos posible" en la explicación.
  • Al transferir patrones, recuerde que el motor RE2 de Go no admite miradas o referencias hacia atrás; el fragmento de Go le advierte cuando su patrón los usa.
  • Escape backslashes en literales normales de cadenas, o usar cadenas sin procesar (r"..." en Python, backticks en Go) como lo hacen los fragmentos.

Preguntas frecuentes

¿Qué sabor regex se usa?

El analizador y el combinador utilizan la sintaxis de JavaScript (ECMAScript 2024), incluidos los grupos nombrados, lookbehind y las propiedades Unicode que escapan con la bandera u.

¿Cómo es esto diferente de la prueba de regex?

El probador de regex se centra en la coincidencia y sustitución de texto. El visualizador se centra en comprender y documentar un patrón.

¿Puedo guardar el diagrama?

El diagrama es un SVG; haga clic derecho para guardar o copiar la imagen.

¿Mi patrón o texto sale del navegador?
  • No, no es así. El análisis, el dibujo y la coincidencia ocurren localmente.

Sí. Todo el procesamiento se realiza directamente en tu navegador mediante JavaScript, Web Workers y APIs web. Nada de lo que escribes, pegas o subes se envía a nuestros servidores.

Esta página se tradujo automáticamente del inglés. Si encuentras un error, avísanos.