Il regex che mi è costato più tempo è stato quello che non ho scritto Aveva quattro anni, sedeva in uno strato di convalida e sembrava che un gatto avesse attraversato la tastiera: gruppi nidificati, un lookahead, due classi di personaggi e un {2,} nascondersi alla fine Un ticket di supporto diceva che stava rifiutando un input valido, e prima che potessi risolverlo dovevo capirlo, il che significava far funzionare mentalmente il motore sul pattern un token alla volta Questa è la tassa che ogni sviluppatore paga su un regex sconosciuto, ed è esattamente la tassa il Spiegazione regolare su Toolz.dev è costruito per rimuovere Questa guida riguarda la lettura di espressioni regolari invece di decodificarle e come una suddivisione token per token trasforma un muro di simboli in qualcosa che puoi rivedere come il codice ordinario.
tl; dr: Un regex explainer analizza un'espressione regolare e descrive ogni parte in un inglese semplice, nell'ordine in cui il motore la legge: ancore, classi di caratteri, quantificatori, gruppi, lookaround e escape, tutti etichettati e rientrati in modo che sia visibile la struttura annidata Spiegazione regolare convalida il modello con il vero motore JavaScript e fa l'intera ripartizione nel tuo browser, senza nulla caricato.
Che cosa è un regex explainer?
Un regex explainer prende un'espressione regolare e la traduce, un costrutto alla volta, in una descrizione che puoi leggere Invece di fissarla ^(?<user>[a-z0-9._%+-]+)@ e ricostruendone il significato nella tua testa, ottieni un elenco ordinato: questo è un ancoraggio di inizio corda, questo è un gruppo di acquisizione con nome chiamato utente, questa è una classe di caratteri che corrisponde a una lettera minuscola, una cifra, un punto, un segno percentuale, un più o un trattino, e questo quantificatore significa una o più volte Il modello non è cambiato, ma lo sforzo di comprenderlo si è spostato dalla tua testa allo strumento.
Il valore deriva dal fatto che le espressioni regolari sono volutamente compatte Ogni simbolo porta significato, e lo stesso intento può essere scritto in molti modi diversi, quindi non esiste un modo affidabile per scremare un modello nel modo in cui si screma una funzione Una singola barra rovesciata vagante cambia un punto letterale in & quot; qualsiasi carattere, & quot; e un quantificatore avido in cui si voleva che uno pigro cambiasse quale testo cattura un gruppo Leggere correttamente un regex significa simulare il motore, e simulare il motore a mano è lento e soggetto a errori Lo spiegante fa quella simulazione e ti mostra il risultato.
Su Toolz.dev il flusso è breve Incolli il modello senza le sue barre circostanti, commuti i flag che usa e la ripartizione appare immediatamente I gruppi nidificati sono rientrati in modo che la forma del modello sia visibile a colpo d'occhio e ogni flag è descritto nel contesto in modo da capire come cambia l'intera corrispondenza anziché solo la sintassi.
In cosa è diverso un explainer da un tester regex?
Questi due strumenti rispondono a domande diverse, e sapere di quale hai bisogno fa risparmiare tempo Un tester regex esegue un pattern contro il testo di esempio e mostra ciò che corrisponde: le corrispondenze evidenziate, i gruppi di cattura e qualsiasi errore Risponde a & quot; questo pattern fa quello che voglio su questo input.& quot; Un explainer descrive cosa significa il pattern senza alcun input di test Risponde a & quot; che cosa sta effettivamente dicendo questo pattern."
Si raggiunge lo spiegante quando il regex è l'ignoto, non i dati La revisione di una richiesta pull che aggiunge un modello di convalida, ereditando una base di codice piena di espressioni non documentate o cercando di capire una risposta che hai copiato da un forum sono tutti casi in cui hai il modello e devi sapere cosa fa prima di fidarti di te Raggiungi il tester regex quando già capisci lo schema e vuoi confermarne il comportamento rispetto agli esempi reali In pratica i due lavorano in coppia: spiega uno schema per capirlo, poi testalo per dimostrarlo Il tester e lo spiegante si siedono uno accanto all'altro su Toolz.dev proprio per questo motivo.
C'è un terzo strumento nella famiglia che vale la pena nominare Il Costruttore di regex assembla un pattern da componenti e modelli quando si sta partendo da zero Costruisci, spiega, prova: quei tre coprono l'intero ciclo di vita del lavoro con un'espressione regolare, dalla scrittura di uno non devi ancora capirne uno che non hai scritto.
Cosa mostra effettivamente la ripartizione?
Lo spiegante cammina il modello da sinistra a destra ed emette una linea etichettata per costrutto, nell'ordine in cui il motore li incontra. Quell'ordinamento è importante, perché un'espressione regolare viene letta in sequenza, e vedere i token in sequenza rispecchia il modo in cui procede effettivamente la corrispondenza.
Le ancore sono al primo posto nella maggior parte dei modelli. IL ^ e $ i simboli non corrispondono ai caratteri; essi asseriscono una posizione, l'inizio e la fine della stringa, o l'inizio e la fine di ogni riga quando il flag multilinea è impostato Lo spiegante nota questo duplice comportamento, quindi non si è mai sorpresi da un'ancora che si comporta diversamente sotto il m bandiera.
Le classi di caratteri, scritte tra parentesi quadre, descrivono un singolo carattere tratto da un insieme Lo spiegante espande l'insieme in parole: intervalli come a-z diventa & quot; l'intervallo da a a z, & quot; la stenografia sfugge come \d diventa & quot; una cifra, & quot; e un caret principale diventa & quot; qualsiasi carattere che non è & quot; il set elencato Una classe densa come [a-zA-Z0-9._%+-] si legge come un elenco semplice invece che come un puzzle.
I quantificatori sono dove vivono i bug sottili, quindi ottengono le loro linee. UN * è zero o più, + è uno o più, ? è zero o uno, e {n,m} è un intervallo esplicito. Fondamentalmente, lo spiegante segnala quantificatori pigri, quelli scritti con un finale ? come ad esempio +? oppure *?, perché la differenza tra avido e pigro cambia il testo che un modello cattura senza modificare un singolo carattere visibile altrove.
I gruppi e le soluzioni panoramiche sono rientrati per mostrare la nidificazione I gruppi di cattura, i gruppi che non catturano, i gruppi con nome e tutti e quattro i tipi di lookaround ottengono ciascuno una descrizione di ciò che fanno e il modello del bambino al loro interno è rientrato di un livello in modo che la struttura si legga come un contorno annidato piuttosto che come una serie piatta di simboli.
Ecco come i costrutti comuni si associano a ciò che ti dice lo spiegante:
| Costruire | esempio | Cosa dice lo spiegante |
|---|---|---|
| Ancoraggio | ^ |
Inizio-di-stringa (o inizio di una linea con la bandiera m) |
| classe dei personaggi | [a-z] |
Un singolo carattere dalla gamma a alla z |
| Ipotizzando | \d |
Una cifra, da 0 a 9 |
| Quantificatore | {2,} |
Ripetuto 2 o più volte |
| Quantificatore pigro | +? |
Ripetuto una o più volte, il meno possibile |
| Gruppo di cattura | (...) |
Inizio di un gruppo di acquisizione, salvato per il riutilizzo |
| Gruppo denominato | (?<id>...) |
Inizio di un gruppo di acquisizione con nome & quot;id" |
| Guarda avanti | (?=...) |
Il modello allegato deve seguire, ma non viene consumato |
| Indietroriferimento | \1 |
Corrisponde allo stesso gruppo di testo 1 catturato |
Le descrizioni seguono la terminologia utilizzata nel riferimento alle espressioni regolari MDN, quindi se vuoi leggere oltre su un singolo costrutto, le parole nella scomposizione sono le parole da cercare.
Perché il sapore è importante?
Le espressioni regolari non sono un linguaggio; sono una famiglia di quelle strettamente correlate JavaScript, PCRE (utilizzato da PHP e molti strumenti), Python' s re modulo, Java e 'NET condividono tutti la sintassi principale, ma divergono ai bordi e questi bordi sono i luoghi in cui si genera confusione. L'esplicatore Regex descrive le espressioni regolari JavaScript, il sapore utilizzato dai browser e dai Node.j, perché questo è ciò contro cui lo strumento si convalida e ciò che la maggior parte degli sviluppatori web esegue effettivamente.
Il nucleo condiviso è ampio e affidabile Classi di caratteri, i quantificatori comuni, alternanza con |, raggruppamento, ancoraggi e abbreviazioni standard come \d e \w significa la stessa cosa ovunque Se il tuo pattern utilizza solo quelli, la spiegazione è accurata indipendentemente dalla lingua in cui alla fine lo eseguirai Le divergenze sono nelle funzionalità avanzate: il supporto lookbehind è arrivato tardi in JavaScript e differisce da PCRE, la sintassi del gruppo denominato varia tra i sapori e alcuni motori supportano la ricorsione o i quantificatori possessivi che JavaScript non ha affatto.
La regola pratica è semplice Tratta la spiegazione dei costrutti condivisi come autorevole, e ricontrolla qualsiasi estensione specifica per il gusto rispetto alla documentazione per il tuo linguaggio di destinazione, Perché lo spiegante convalida il pattern con il motore JavaScript reale prima, un costrutto che JavaScript non supporta verrà a galla come un errore piuttosto che come una spiegazione sbagliata, che è il fallimento più sicuro Se stai lavorando attraverso lo stack nel modo in cui lo faccio io, muovendoti tra un backend PHP e un frontend JavaScript, essere esplicito sul sapore salva la classe di bug in cui un pattern che ha funzionato in un luogo si comporta silenziosamente male in un altro.
Come faccio a leggere un modello reale con esso?
Prendi il campione caricato dallo strumento per impostazione predefinita, un modello a forma di email: ^(?<user>[a-z0-9._%+-]+)@(?<domain>[a-z0-9.-]+\.[a-z]{2,})$ con la bandiera senza distinzione tra maiuscole e minuscole Da solo è un boccone Corri attraverso lo spiegante e si decompone in un contorno breve e leggibile.
la ^ asserisce l'inizio della stringa Il primo gruppo nominato, utente, cattura uno o più caratteri da una classe di lettere minuscole, cifre e la punteggiatura comunemente consentita nella parte locale di un indirizzo Quindi un letterale @. Il secondo gruppo, dominio denominato, cattura una o più lettere, cifre, punti o trattini, seguiti da un punto letterale e da una serie di due o più lettere, che è il dominio di primo livello Infine $ asserisce la fine della stringa Il i flag significa che l'intera faccenda corrisponde indipendentemente dal caso, quindi le classi solo minuscole accettano comunque l'input maiuscolo.
Leggi in questo modo, saltano fuori due cose che sono invisibili nello schema grezzo Primo, il {2,} sul dominio di primo livello significa che il modello accetta qualsiasi TLD di due o più lettere, che è corretto per i domini moderni ma rifiuterebbe un TLD internazionalizzato scritto in caratteri non latini In secondo luogo, gli ancoraggi significano che il modello deve corrispondere all'intera stringa, quindi convalida un intero indirizzo anziché trovarne uno all'interno di un testo più grande Questi sono esattamente i tipi di dettagli che determinano se un regex di convalida è troppo rigido o troppo sciolto e sono evidenti nella suddivisione pur essendo facili da perdere nell'originale.
Una volta compreso uno schema, spesso si vuole fare qualcosa con esso Se si tratta di uno schema "trova e sostituisci", il Regex Sostituisci tool esegue la sostituzione con il supporto backreference Se si tratta di un pattern di estrazione, il Estrattore di posta elettronica applica una versione curata esattamente di questo tipo di corrispondenza e-mail al testo in blocco Lo spiegante è il passaggio di lettura; questi sono i passaggi di recitazione.
Quando lo userei davvero?
La revisione del codice è il caso che ho colpito di più Un compagno di squadra aggiunge un'espressione regolare a un livello di convalida o a un parser di log, e il diff mostra una linea di simboli senza commenti Incollandolo nello spiegante si trasforma uno sguardo di cinque minuti in una lettura di dieci secondi, e cattura la classica recensione che manca: un punto senza escape che corrisponde a qualsiasi carattere, un quantificatore avido che cattura troppo, un'ancora che è presente o assente quando dovrebbe essere nell'altro modo Ho iniziato a incollare la ripartizione nella richiesta pull come commento, che documenta il modello per la persona successiva gratuitamente.
Imparare è il prossimo Le espressioni regolari sono una di quelle abilità che non si attaccano mai completamente a meno che non le si usi quotidianamente, e tornare su di esse dopo qualche mese significa sempre reimparare la sintassi Leggere schemi reali con lo spiegante è una via più veloce per tornare indietro rispetto alla rilettura di un tutorial, perché si vedono i costrutti nel contesto, facendo un lavoro reale, piuttosto che come esempi isolati Col tempo le descrizioni diventano inutili perché le si è interiorizzate, che è il punto.
Il debug chiude il ciclo Quando un pattern corrisponde alla cosa sbagliata, la spiegazione spesso rivela perché prima ancora di raggiungere l'input del test Un quantificatore che è avido quando dovrebbe essere pigro, una classe di caratteri che include un carattere di cui ti sei dimenticato, un ancoraggio mancante che lascia che il pattern corrisponda a una sottostringa: tutti questi sono visibili nella suddivisione Tengo lo spiegatore accanto al tester regex quindi posso spiegare e testare nella stessa seduta, ed entrambi vivono nel kit più ampio che ho descritto nel Guida al kit per gli sviluppatori web.
È privato, e funziona offline?
Sì ad entrambi, e per lo stesso motivo L'intera ripartizione è calcolata in JavaScript all'interno del browser Il pattern non viene mai inviato ad un server, non viene registrato nulla, e una volta che la pagina è stata caricata lo strumento continua a funzionare con la connessione disabilitata Puoi confermarlo aprendo la scheda di rete o andando offline e guardandola continuare a funzionare.
Questo conta più di quanto potrebbe sembrare per le espressioni regolari nello specifico I pattern sono spesso scritti per abbinare formati sensibili: identificatori interni, forme di chiavi API, layout dei numeri di account o la struttura dei dati privati Incollare uno di quelli in uno strumento lato server significa consegnare una descrizione del formato dei dati a una terza parte Mantenere l'analisi lato client significa che il modello rimane sulla macchina, che è lo stesso principio di privacy-first dietro ogni strumento su Toolz.dev, e uno di cui ho scritto più completamente nel Guida alla privacy dei dati.
FAQ
Come faccio a capire un'espressione regolare complessa?
Incolla il modello nello spiegante e leggi la ripartizione token per token, che descrive ogni costrutto in un inglese semplice nell'ordine in cui il motore lo applica. I gruppi nidificati sono rientrati in modo da poter vedere la struttura. Questo trasforma la simulazione mentale del motore in una semplice lettura di un elenco etichettato, che è più veloce e molto meno soggetto a errori.
Qual è la differenza tra un regex explainer e un tester regex?
Un regex explainer descrive cosa significa un pattern senza alcun input di test, mentre un tester regex esegue il pattern contro il testo di esempio e mostra ciò che corrisponde Usa lo explainer per capire o documentare un pattern non familiare, quindi usa il tester per confermare che si comporta come previsto contro i dati reali Rispondono a domande diverse e funzionano bene come una coppia.
Quale sapore regex descrive lo spiegatore?
Descrive le espressioni regolari JavaScript (ECMAScript), il sapore utilizzato dai browser e Node.js. La maggior parte della sintassi, comprese le classi di caratteri, i quantificatori, i gruppi e gli ancoraggi, è condivisa con PCRE, Python e Java, quindi la spiegazione principale è accurata tra i linguaggi Le funzionalità specifiche del sapore come lookbehind e la sintassi del gruppo denominato possono differire, quindi verifica quelle rispetto alla lingua di destinazione.
Qual è la differenza tra un quantificatore avido e un pigro?
Un quantificatore goloso come + o * corrisponde a più testo possibile prima di fare backtracking, mentre un quantificatore pigro, lo stesso simbolo seguito da ? come +? o *?, corrisponde il meno possibile Lo spiegante etichetta quantificatori pigri in modo esplicito, perché la differenza cambia quale testo cattura un modello senza modificare alcun carattere visibile altrove.
Lo spiegatore può gestire lo sguardo e guardare dietro?
SÌ. Sguardo positivo e negativo, scritto (?=...) e (?!...), e sguardo positivo e negativo dietro, scritto (?<=...) e (?<!...), sono etichettati ciascuno con ciò che affermano e sono rientrati come gli altri gruppi. Gli sguardi controllano che il testo appaia o meno in una posizione senza includerlo nella corrispondenza, cosa che le descrizioni rendono esplicita.
Perché lo spiegatore dice che il mio modello non è valido?
Il modello viene compilato con il motore RegExp reale prima che venga spiegato, quindi una parentesi o parentesi sbilanciata, un escape non valido o un flag sconosciuto vengono segnalati con il messaggio di errore esatto di engine' Correggi il problema segnalato, molto spesso una parentesi o una parentesi di chiusura mancante, e apparirà la suddivisione.
È sicuro incollare una regex che corrisponde ai dati privati?
Sì. Il modello viene analizzato interamente in JavaScript all'interno del tuo browser. Non viene mai inviato a un server, non viene mai registrato e lo strumento funziona con la connessione disabilitata una volta caricata la pagina. Puoi spiegare in modo sicuro i modelli da codebase privati o che corrispondono a formati personali o proprietari.
In cosa è diverso da un costruttore di regex?
Un costruttore di regex ti aiuta a costruire un nuovo modello da componenti e modelli quando stai partendo da zero, mentre lo spiegante descrive un modello che hai già I due sono complementari: costruisci un modello con il Costruttore di Regex, comprendi uno esistente con lo spiegante e conferma entrambi contro l'input reale con il Tester Regex.
Leggi i tuoi schemi gratuitamente Spiegazione regolare. Interrompe un'espressione regolare token per token in un inglese semplice, interamente nel tuo browser, senza che venga caricato nulla.
