Le regex qui m'a coûté le plus de temps était celui que je n'ai pas écrit Il avait quatre ans, était assis dans une couche de validation, et avait l'air d'un chat avait marché sur le clavier : des groupes imbriqués, un lookahead, deux classes de personnages, et un {2,} cachant à la fin Un ticket de support disait qu'il rejetait une entrée valide, et avant que je puisse la réparer je devais la comprendre, ce qui signifiait faire tourner mentalement le moteur sur le modèle un jeton à la fois C'est la taxe que chaque développeur paie sur un regex inconnu, et c'est exactement la taxe le Explication de regex sur Toolz.dev est construit pour supprimer Ce guide concerne la lecture des expressions régulières au lieu de les décoder, et comment une panne jeton par jeton transforme un mur de symboles en quelque chose que vous pouvez examiner comme du code ordinaire.
tl;dr : Un explicateur regex analyse une expression régulière et décrit chaque partie en anglais simple, dans l'ordre dans lequel le moteur la lit : ancres, classes de caractères, quantificateurs, groupes, recherches et évasions, toutes étiquetées et échancrées, une structure ainsi imbriquée est visible Explication de regex valide le modèle avec le véritable moteur JavaScript et effectue toute la panne de votre navigateur, sans rien télécharger.
Qu'est-ce qu'un explicateur regex ?
Un explicateur regex prend une expression régulière et la traduit, une construction à la fois, en une description que vous pouvez lire Au lieu de regarder ^(?<user>[a-z0-9._%+-]+)@ et en reconstruisant sa signification dans votre tête, vous obtenez une liste ordonnée : il s'agit d'une ancre de début de chaîne, il s'agit d'un groupe de capture nommé appelé utilisateur, il s'agit d'une classe de caractères correspondant à une lettre minuscule, un chiffre, un point, un signe de pourcentage, un plus ou un trait d'union, et ce quantificateur signifie une ou plusieurs fois. Le modèle n’a pas changé, mais l’effort de compréhension s’est déplacé de votre tête vers l’outil.
La valeur vient du fait que les expressions régulières sont délibérément compactes Chaque symbole porte un sens, et la même intention peut être écrite de nombreuses façons différentes, donc il n'y a pas de moyen fiable de survoler un motif de la façon dont vous effacez une fonction Une seule barre oblique inverse égarée change un point littéral en " ; n'importe quel caractère," ; et un quantificateur gourmand où vous vouliez un texte paresseux change quel texte un groupe capture Lire correctement un regex signifie simuler le moteur, et simuler le moteur à la main est lent et sujet aux erreurs L'explicateur fait cette simulation et vous montre le résultat.
Sur Toolz.dev le flux est court Vous collez le motif sans ses barres obliques environnantes, basculez les drapeaux qu'il utilise, et la panne apparaît immédiatement Les groupes imbriqués sont en retrait pour que la forme du motif soit visible d'un coup d'œil, et chaque drapeau est décrit dans son contexte pour que vous compreniez comment il change toute la correspondance plutôt que seulement la syntaxe.
En quoi un explicateur est-il différent d'un testeur de regex ?
Ces deux outils répondent à des questions différentes, et savoir de qui vous avez besoin permet de gagner du temps Un testeur de regex exécute un modèle contre un exemple de texte et montre ce qu'il correspond : les correspondances en surbrillance, les groupes de capture et toute erreur Il répond à " ; ce modèle fait-il ce que je veux sur cette entrée." ; Un explicateur décrit ce que signifie le modèle sans aucune entrée de test. Il répond à " ; qu'est-ce que ce modèle dit réellement." ;
Vous atteignez l'explicateur lorsque le regex est l'inconnu, pas les données Examiner une requête d'extraction qui ajoute un modèle de validation, hériter d'une base de code pleine d'expressions non documentées ou essayer de comprendre une réponse que vous avez copiée à partir d'un forum sont tous des cas où vous avez le modèle et avez besoin de savoir ce qu'il fait avant de lui faire confiance Vous atteignez le testeur de regex quand vous comprenez déjà le modèle et que vous voulez confirmer son comportement par rapport à des exemples réels En pratique les deux fonctionnent par paire : expliquez un modèle pour le comprendre, puis testez-le pour le prouver Le testeur et l'explicateur sont assis l'un à côté de l'autre sur Toolz.dev pour exactement cette raison.
Il y a un troisième outil dans la famille qui mérite d'être nommé Le Regex Builder assemble un modèle à partir de composants et de modèles lorsque vous partez de zéro Construisez, expliquez, testez : ces trois-là couvrent tout le cycle de vie du travail avec une expression régulière, de l'écriture d'une expression que vous n'avez pas encore à comprendre une que vous n'avez pas écrite.
Que montre réellement la panne ?
L'explicateur parcourt le motif de gauche à droite et émet une ligne étiquetée par construction, dans l'ordre dans lequel le moteur les rencontre. Cet ordre compte, car une expression régulière est lue séquentiellement, et voir les jetons en séquence reflète la façon dont la correspondance se déroule réellement.
Les ancres viennent en tête dans la plupart des motifs Le ^ et $ les symboles ne correspondent pas aux caractères ; ils affirment une position, le début et la fin de la chaîne, ou le début et la fin de chaque ligne lorsque le drapeau multiligne est défini L'explicateur note ce double comportement, vous n'êtes donc jamais surpris par une ancre qui se comporte différemment sous le m drapeau.
Les classes de caractères, écrites entre crochets, décrivent un seul caractère tiré d'un ensemble L'explicateur élargit l'ensemble en mots : s'étend comme a-z devenez " ; la plage a à z," ; la sténographie s'échappe comme \d devenez " ; un chiffre," ; et un premier caret devient " ; tout caractère qui n'est PAS" ; l'ensemble répertorié. Une classe dense comme [a-zA-Z0-9._%+-] lit comme une liste simple au lieu d'un puzzle.
Les quantificateurs sont l'endroit où vivent les bugs subtils, ils obtiennent donc leurs propres lignes. UN * est nul ou plus, + est un ou plusieurs, ? est zéro ou un, et {n,m} est une plage explicite. Fondamentalement, l'explicateur signale les quantificateurs paresseux, ceux écrits avec un fin ? tels que +? ou *?« , parce que la différence entre les changements gourmands et paresseux dans le texte qu'un motif capture sans changer un seul caractère visible ailleurs ».
Les groupes et les lookarounds sont indentés pour montrer l'imbrication Les groupes de capture, les groupes non capturants, les groupes nommés et les quatre types de lookaround obtiennent chacun une description de ce qu'ils font, et le motif enfant à l'intérieur d'eux est indenté d'un niveau de sorte que la structure se lit comme un contour imbriqué plutôt que comme une série plate de symboles.
Voici comment les constructions communes correspondent à ce que l'explicateur vous dit :
| Construire | exemple | Ce que dit l'explicateur |
|---|---|---|
| Ancre | ^ |
Début de chaîne (ou début de ligne avec le drapeau m) |
| Classe de personnages | [a-z] |
Un seul caractère de la plage a à z |
| Sténographie | \d |
Un chiffre, 0 à 9 |
| Quantificateur | {2,} |
Répété 2 fois ou plus |
| Quantificateur paresseux | +? |
Répété une ou plusieurs fois, le moins possible |
| Groupe de capture | (...) |
Début d'un groupe de capture, enregistré pour réutilisation |
| Groupe nommé | (?<id>...) |
Début d'un groupe de capture nommé " ;id" ; |
| Regarder devant | (?=...) |
Le motif ci-joint doit suivre, mais n'est pas consommé |
| Retourréférence | \1 |
Correspond au même groupe de texte 1 capturé |
Les descriptions suivent la terminologie utilisée dans le Référence des expressions régulières MDN« Donc, si vous souhaitez lire plus loin sur un seul construit, les mots dans la répartition sont les mots à rechercher ».
Pourquoi la saveur compte-t-elle ?
Les expressions régulières ne sont pas un langage ; elles sont une famille de celles qui sont étroitement liées JavaScript, PCRE (utilisé par PHP et de nombreux outils), Python' ;s re module, Java et .NET partagent tous la syntaxe de base, mais ils divergent sur les bords, et ces bords sont là où la confusion se reproduit Le Regex Explainer décrit les expressions régulières JavaScript, la saveur utilisée par les navigateurs et Node.js, car c'est ce contre quoi l'outil valide et ce que la plupart des développeurs Web exécutent réellement.
Le noyau partagé est grand et fiable Classes de caractères, les quantificateurs communs, alternance avec |, regroupement, ancrages et raccourcis standard comme \d et \w signifie la même chose partout Si votre modèle utilise uniquement ceux-là, l'explication est exacte quel que soit le langage dans lequel vous finirez par l'exécuter Les divergences se situent dans les fonctionnalités avancées : le support lookbehind est arrivé tardivement en JavaScript et diffère du PCRE, la syntaxe du groupe nommé varie selon les saveurs, et certains moteurs prennent en charge la récursion ou les quantificateurs possessifs que JavaScript n'a pas du tout.
La règle pratique est simple Traitez l'explication des constructions partagées comme faisant autorité, et revérifiez toute extension spécifique à la saveur par rapport à la documentation pour votre langage cible Parce que l'explicateur valide le modèle avec le moteur JavaScript réel d'abord, une construction que JavaScript ne supporte pas fera surface comme une erreur plutôt que comme une mauvaise explication, ce qui est l'échec plus sûr Si vous travaillez à travers la pile comme je le fais, en passant d'un backend PHP à un frontend JavaScript, être explicite sur la saveur sauve la classe de bug où un motif qui a fonctionné à un endroit se comporte silencieusement mal dans un autre.
Comment lire un vrai motif avec ?
Prenez l'échantillon que l'outil charge par défaut, un motif en forme d'e-mail : ^(?<user>[a-z0-9._%+-]+)@(?<domain>[a-z0-9.-]+\.[a-z]{2,})$ avec le drapeau insensible à la casse, À lui seul, c'est une bouchée, Passez-le dans l'explicateur et il se décompose en un court contour lisible.
le ^ affirme le début de la chaîne Le premier groupe nommé, utilisateur, capture un ou plusieurs caractères d'une classe de lettres minuscules, de chiffres, et la ponctuation communément autorisée dans la partie locale d'une adresse Puis un littéral @. Le deuxième groupe, domaine nommé, capture une ou plusieurs lettres, chiffres, points ou tirets, suivis d'un point littéral et d'une série de deux lettres ou plus, qui est le domaine de premier niveau. Enfin $ affirme la fin de la chaîne Le i flag signifie que le tout correspond quel que soit le cas, donc les classes minuscules acceptent toujours les entrées majuscules.
Lisez de cette façon, deux choses sautent qui sont invisibles dans le motif brut D'abord, le {2,} sur le domaine de niveau supérieur signifie que le motif accepte n'importe quel TLD de deux lettres ou plus, ce qui est correct pour les domaines modernes mais rejetterait un TLD internationalisé écrit en caractères non latins Deuxièmement, les ancres signifient que le motif doit correspondre à la chaîne entière, donc il valide une adresse entière plutôt que d'en trouver une à l'intérieur d'un texte plus grand Ce sont exactement les genres de détails qui déterminent si un regex de validation est trop strict ou trop lâche, et ils sont évidents dans la panne tout en étant faciles à manquer dans l'original.
Une fois que vous avez compris un modèle, vous voulez souvent en faire quelque chose S'il s'agit d'un modèle de recherche et de remplacement, le Regex Remplacer l'outil exécute la substitution avec le support de référence arrière S'il s'agit d'un modèle d'extraction, le Extracteur de courrier électronique applique une version organisée de exactement ce type de correspondance de courrier électronique au texte en masse. L'explicateur est l'étape de lecture ; ce sont les étapes d'action.
Quand utiliserais-je réellement cela ?
La révision de code est le cas que j'ai le plus touché Un coéquipier ajoute une expression régulière à une couche de validation ou à un analyseur de log, et la différence montre une ligne de symboles sans commentaire Le coller dans l'explicateur transforme un regard de cinq minutes en une lecture de dix secondes, et il attrape la critique classique rate : un point non-échappé qui correspond à n'importe quel personnage, un quantificateur gourmand qui en capture trop, une ancre qui est présente ou absente alors que cela devrait être l'autre façon J'ai commencé à coller la panne dans la demande de tirage comme commentaire, qui documente gratuitement le modèle pour la personne suivante.
Apprendre est la suivante Les expressions régulières sont une de ces compétences qui ne collent jamais complètement à moins de les utiliser quotidiennement, et y revenir après quelques mois signifie toujours réapprendre la syntaxe La lecture de motifs réels avec l'explicateur est un moyen de revenir plus rapide que la relecture d'un tutoriel, car vous voyez les constructions dans leur contexte, en faisant un travail réel, plutôt que comme des exemples isolés Avec le temps les descriptions deviennent inutiles parce que vous les avez intériorisées, ce qui est le point.
Le débogage ferme la boucle Lorsqu'un motif correspond à la mauvaise chose, l'explication révèle souvent pourquoi avant même d'atteindre l'entrée de test Un quantificateur qui est gourmand alors qu'il devrait être paresseux, une classe de caractères qui inclut un caractère que vous avez oublié, une ancre manquante qui laisse le motif correspondre à une sous-chaîne : tous ceux-ci sont visibles dans la panne Je garde l'explicateur à côté du testeur de regex je peux donc expliquer et tester au même moment, et les deux vivent dans le kit plus large que j'ai décrit dans le Guide d'outils pour les développeurs Web.
Est-ce privé, et fonctionne-t-il hors ligne ?
Oui aux deux, et pour la même raison La panne entière est calculée en JavaScript à l'intérieur de votre navigateur Le modèle n'est jamais envoyé à un serveur, rien n'est enregistré, et une fois la page chargée, l'outil continue de fonctionner avec votre connexion désactivée Vous pouvez le confirmer en ouvrant l'onglet réseau ou en se déconnectant et en le regardant continuer à fonctionner.
Cela compte plus que ce que cela pourrait sembler pour les expressions régulières spécifiquement Les modèles sont souvent écrits pour correspondre aux formats sensibles : identifiants internes, formes de clés API, dispositions de numéros de compte ou structure de données privées. coller l'un d'entre eux dans un outil côté serveur signifie remettre une description de votre format de données à un tiers Garder l'analyse côté client signifie que le modèle reste sur votre machine, ce qui est le même principe de confidentialité derrière chaque outil sur Toolz.dev, et celui sur lequel j'ai écrit plus en détail dans le Guide de confidentialité des données.
FAQ
Comment comprendre une expression régulière complexe ?
Collez le motif dans l'explicateur et lisez la ventilation jeton par jeton, qui décrit chaque construction en anglais simple dans l'ordre dans lequel le moteur l'applique Les groupes imbriqués sont en retrait pour que vous puissiez voir la structure Cela transforme la simulation mentale du moteur en une simple lecture d'une liste étiquetée, qui est plus rapide et beaucoup moins sujette aux erreurs.
Quelle est la différence entre un explicateur regex et un testeur regex ?
Un explicateur regex décrit ce que signifie un motif sans aucune entrée de test, tandis qu'un testeur regex exécute le motif par rapport à un exemple de texte et montre ce qu'il correspond Utilisez l'explicateur pour comprendre ou documenter un motif inconnu, puis utilisez le testeur pour confirmer qu'il se comporte comme prévu par rapport à des données réelles Ils répondent à différentes questions et fonctionnent bien comme une paire.
Quelle saveur de regex l'explication décrit-il ?
Il décrit les expressions régulières JavaScript (ECMAScript), la saveur utilisée par les navigateurs et Node.js. La plupart des syntaxes, y compris les classes de caractères, les quantificateurs, les groupes et les ancres, sont partagées avec PCRE, Python et Java, de sorte que l'explication de base est précise dans tous les langages. Les fonctionnalités spécifiques à la saveur comme lookbehind et la syntaxe des groupes nommés peuvent différer, alors vérifiez celles-ci par rapport à votre langage cible.
Quelle est la différence entre un quantificateur gourmand et paresseux ?
Un quantificateur gourmand tel que + ou * correspond à autant de texte que possible avant le retour en arrière, tandis qu'un quantificateur paresseux, le même symbole suivi de ? tel que + ? ou * ?, correspond le moins possible. L'explicateur étiquette explicitement les quantificateurs paresseux, car la différence change le texte capturé par un motif sans changer aucun caractère visible ailleurs.
L'explication peut-elle gérer lookahead et regarder derrière ?
Oui. Les regards positifs et négatifs, écrits (?=...) et (?!...), et les regards positifs et négatifs derrière, écrits (?<=...) et (?< ; !...), sont chacun étiquetés avec ce qu'ils affirment et sont en retrait comme les autres groupes. Les recherches vérifient que le texte apparaît ou non à une position sans l'inclure dans le match, ce que les descriptions explicites.
Pourquoi l'explication indique-t-il que mon modèle n'est pas valide ?
Le modèle est compilé avec le moteur RegExp réel avant qu'il ne soit expliqué, donc un crochet ou une parenthèse déséquilibrée, un échappement invalide ou un indicateur inconnu est signalé avec le moteur' ; le message d'erreur exact Corrigez le problème signalé, le plus souvent une parenthèse ou un support de fermeture manquant, et la panne apparaîtra.
Est-il sûr de coller un regex qui correspond aux données privées ?
Oui. Le modèle est entièrement analysé en JavaScript dans votre navigateur. Il n'est jamais envoyé à un serveur, jamais enregistré, et l'outil fonctionne avec votre connexion désactivée une fois la page chargée. Vous pouvez expliquer en toute sécurité les modèles des bases de code privées ou ceux qui correspondent aux formats personnels ou propriétaires.
En quoi est-ce différent d'un constructeur de regex ?
Un constructeur de regex vous aide à construire un nouveau modèle à partir de composants et de modèles lorsque vous partez de zéro, tandis que l'explicateur décrit un modèle que vous avez déjà Les deux sont complémentaires : construire un modèle avec le constructeur Regex, comprendre un existant avec l'explicateur et confirmer soit contre une entrée réelle avec le testeur Regex.
Lisez vos propres modèles gratuitement Explication de regex. Il décompose une expression régulière jeton par jeton en anglais simple, entièrement dans votre navigateur, sans rien télécharger.
