Diagrama de regex (railroad)

Como visualizar uma expressão regular

1. Escreve ou cola o teu padrão em Expressão regular. Também podes colar um literal JavaScript completo como /^\d{3}-\d{4}$/gm: as barras são removidas e as flags passam automaticamente para a caixa das flags.
2. Acrescenta as flags de que precisares (qualquer uma de d g i m s u v y). As flags mudam a forma como algumas partes são desenhadas: com m, ^ e $ passam a «início da linha» e «fim da linha»; com s, o ponto passa a «qualquer carácter».
3. O diagrama atualiza-se enquanto escreves. Desenhar diagrama volta a desenhá-lo quando quiseres, e Exemplo seguinte percorre alguns padrões comuns (email, número de telefone, cor hexadecimal, preço, etiqueta HTML, URL).
4. Lê o diagrama da esquerda para a direita, do ponto cheio até ao ponto com anel. Cada caminho que consegues seguir é uma cadeia que o padrão pode reconhecer.
5. Usa Transferir SVG para uma imagem vetorial nítida (documentação, apresentações), Transferir PNG para uma imagem com o dobro da resolução, ou Copiar código SVG para colar o markup numa página web.

Passa o rato sobre uma caixa para veres a parte do padrão de onde ela vem e a respetiva posição.

Como ler um diagrama railroad

Os diagramas railroad, também chamados diagramas de sintaxe, descrevem uma gramática como um conjunto de linhas de comboio. Uma expressão regular é exatamente esse tipo de gramática, por isso o desenho mostra a estrutura muito melhor do que uma linha densa de símbolos:

• As caixas azuis são texto literal que tem de aparecer tal como está escrito, por exemplo “@”.
• As caixas verdes são tipos de caracteres (\d algarismo, \w carácter de palavra, . qualquer carácter…) e classes de caracteres. Uma classe como [\w.+-] passa a uma caixa com o título «um de» que enumera cada elemento; uma classe negada [^…] fica a vermelho com o título «nenhum de».
• As pílulas roxas são âncoras e limites: início e fim do texto ou da linha, \b limite de palavra. Correspondem a uma posição, não a um carácter.
• As caixas laranja tracejadas são referências anteriores como \1 ou \k<name>: o mesmo texto que um grupo capturou antes.
• As molduras tracejadas são grupos. Os grupos de captura são numerados pela ordem do parêntese de abertura («grupo #2 «domain»»); os grupos sem captura (?:…) não têm moldura. Os lookaheads e lookbehinds têm uma moldura cor-de-rosa com a indicação «seguido de» ou «precedido de», porque verificam o texto sem o consumir.
• As linhas paralelas são alternativas separadas por |.
• Uma linha por cima de um elemento permite saltá-lo (?, *, {0,n}). Uma linha por baixo com uma seta volta atrás para o repetir (+, *, {n,m}). As contagens fora do habitual aparecem escritas debaixo do ciclo, como «2 a 5 vezes», e os quantificadores preguiçosos (+?, *?) têm a marca «preguiçoso».

Mensagens de erro com posição

O padrão é verificado pelo próprio motor de expressões regulares JavaScript do teu navegador, por isso o que esta ferramenta aceita é exatamente o que new RegExp() aceita com as mesmas flags. Quando o motor o rejeita, a ferramenta aponta o carácter problemático com a sua posição e um acento circunflexo por baixo do padrão. Reconhece um ) sem par, um grupo que nunca é fechado, uma classe de caracteres sem ], um quantificador sem nada para repetir (*a, a|+), uma barra invertida isolada no fim e quantificadores {n,m} em que n é maior do que m. Os outros erros, como uma referência a um nome de grupo que não existe, são mostrados com a mensagem do navegador.

A expressão só é compilada para ser validada: nunca é executada sobre nenhum texto e nada sai do teu navegador.