J'ai perdu la majeure partie d'un après-midi à cause d'un seul quantificateur gourmand. J'écrivais une carte de redirection pour une migration WordPress - quelques centaines d'anciennes URL qui devaient être réécrites vers de nouvelles limaces - et j'avais une regex qui était présumé Pour capturer la limace de fin de chaque chemin. Cela a fonctionné sur les trois URL que j'ai testées dans ma tête. Cela n'a pas fonctionné sur le quatrième, qui avait deux segments de chemin, car .* J'avais avalé joyeusement la première barre oblique et tout ce qui se passait après. La règle redirigait silencieusement la moitié du site au mauvais endroit, et je l'ai découvert d'un lecteur, pas de mes tests, parce que mes "tests" regardaient le modèle et lui faisaient confiance.
C'est le problème central des expressions régulières : elles sont uniquement en écriture jusqu'à ce que vous les exécutez contre quelque chose. Un modèle se lit comme plausible jusqu'au moment où l'entrée réelle le prouve mal, et les modes de défaillance sont silencieux. Une regex qui ne correspond à rien ne génère aucune erreur. Une regex qui correspond trop à un lancer ne l'erreur. Une regex avec un groupe de capture subtilement erroné vous remet la mauvaise sous-chaîne et passe à autre chose. La seule façon de connaître un modèle fait ce que vous pensez être de lui donner le texte désordonné et chargé de cas de bord qu'il verra réellement et allure à ce qu'il attrape.
un testeur de regex comble cet écart. Vous placez votre motif dans une boîte, votre exemple de texte dans un autre et chaque match s'allume en place. Les groupes de capture sont divisés afin que vous puissiez voir exactement quelle tranche de chaîne a atterri dans le groupe 1 contre le groupe 2. Celui que j'ai construit pour Toolz.dev s'exécute sur le navigateur natif RegExp Engine, le même que votre code JavaScript et Typescript utilise, donc ce que vous voyez dans le testeur est ce que vous obtenez en production. Pas d'approximation, pas de "assez proche".
Ce guide explique comment utiliser le testeur pour déboguer rapidement les modèles, ce que fait chaque indicateur, comment les groupes de capture et les groupes nommés apparaissent dans la sortie et les gotchas spécifiques à JavaScript qui déclenchent des personnes provenant de Python ou de PCRE.
tl;dr : Collez votre modèle dans le Testeur de Regex Toolz.dev (Aucune barre oblique nécessaire), basculez les drapeaux G/I/M/S/U/Y et déposez votre texte de test ci-dessous. Les correspondances mettent en évidence Live avec des couleurs alternées, chaque groupe de capture numéroté et nommé est répertorié par correspondance, et les erreurs de syntaxe indiquent le message exact du moteur. Il utilise le véritable moteur JavaScript RegExp, exécute 100% du côté client, donc les journaux sensibles ne téléchargent jamais et s'associent avec le Regex Builder Pour assembler des motifs à partir de zéro.
Comment tester une regex sans exécuter l'ensemble de votre programme ?
La façon lente de déboguer un regex est la boucle avec laquelle la plupart d'entre nous commençons par : modifier le modèle dans votre code, exécuter le programme, lire la sortie, deviner ce qui n'allait pas, répéter. Chaque itération coûte un programme complet, et les commentaires sont indirects - vous voyez le conséquence du match, pas le match lui-même.
Un testeur réduit cette boucle à rien. Vous collez le modèle, collez le texte représentatif et voyez immédiatement les correspondances. Lorsque vous modifiez un caractère dans le modèle, les surbrillances mettent à jour. Cela resserre le retour au point où vous pouvez explorer — Essayez un + où vous aviez un *, ajoutez une limite de mots, faites un groupe non capturé - et regardez l'effet atterrir en temps réel au lieu de l'imaginer.
La discipline clé utilise immeuble Testez du texte, pas l'exemple propre dans votre tête. L'URL qui a cassé ma carte de redirection avait deux segments de chemin, mon cas de test mental en avait un. Si j'avais collé la liste réelle des anciennes URL dans un testeur, le match avide aurait été visiblement erroné sur la ligne quatre. Saisissez les lignes de journal réelles, les entrées réelles de l'utilisateur, les chemins de fichiers réels, y compris les plus vifs, et laissez le testeur vous montrer où le modèle s'effondre avant que vos utilisateurs ne le fassent.
Qu'est-ce que les drapeaux de regex changent réellement ?
Les drapeaux modifient la façon dont le modèle est appliqué, et leur malentendu est à l'origine d'une grande partie de "pourquoi cela ne fonctionne pas". le testeur Expose les six drapeaux JavaScript comme bascules afin que vous puissiez en inverser un et regarder le changement de résultat.
G — global. Sans cela, le match s'arrête au premier coup sûr. Avec lui, le moteur trouve chaque correspondance dans le texte. Dans le testeur, Global est activé par défaut, car vous souhaitez presque toujours voir toutes les correspondances ; désactivez-le pour confirmer à quoi ressemble un appel unique. String.match à l'extérieur g reviendrait.
I — Ignorer le cas. rend le motif entier insensible à la casse, donc error allumette Error et ERROR. Simple et le plus utilisé, le drapeau après G.
M — Multiligne. Celui-ci est largement mal compris. ça fait non faire qch . Les sauts de ligne croisées. ça change quoi ^ et $ Ancre à : avec m, ils correspondent au début et à la fin de chaque axe, pas seulement le début et la fin de la chaîne entière. Si vous correspondez ligne par ligne dans un journal, vous le souhaitez.
S — dotall. C'est le drapeau qui fait . Faites correspondre les caractères de la nouvelle ligne. sans ça, . Correspond à n'importe quel sauf Un saut de ligne, c'est pourquoi un motif destiné à s'étendre sur plusieurs lignes s'arrête souvent tranquillement au premier. Si votre match doit franchir les limites de la ligne, s est ce dont vous avez besoin - pas m.
U — Unicode. Active le mode Unicode complet, ce qui rend \u{...} Échappe au travail, traite les paires de substitution comme des points de code uniques et crée des classes de personnages comme \p{Letter} disponible. Important lorsque votre texte contient des emoji ou des scripts non latins.
Y — collant. Ancre chaque tentative de match à la position exacte de lastIndex, donc la correspondance ne réussit que si elle commence précisément là. C'est un drapeau de niche utilisé dans les tokenizers et les analyseurs; la plupart des travaux de tous les jours ne le touchent jamais.
La confusion qui coûte le plus de temps est m contre s. Les gens atteignent la multiligne lorsqu'ils signifient dotall. Si votre point n'est pas en train de franchir des lignes, vous avez besoin s. Si vos ancres ne touchent pas les limites de la ligne, vous avez besoin m. Ils résolvent différents problèmes et sont souvent utilisés ensemble.
Comment les groupes de capture sont-ils affichés dans la sortie ?
Les parenthèses dans un modèle effectuent deux tâches : elles regroupent des sous-modèles pour des quantificateurs ou des alternances, et elles capturer La tranche assortie pour l'extraction. Lorsque vous utilisez un regex pour extraire des données du texte - une date et un mois, une ligne de journal et un niveau de ligne - les groupes de capture sont l'intérêt total, et se tromper est la source la plus courante de "le modèle correspond, mais j'ai eu la mauvaise chaîne".
le testeur Répertorie chaque match avec ses groupes de captures s'étalant en dessous. Le groupe 1 est le premier sous-modèle entre parenthèses, le groupe 2 le second, etc., chacun affiché avec le texte exact qu'il a capturé pour cette correspondance. Cela rend les bogues de limite de groupe évidents : si le groupe 1 a saisi plus que ce à quoi vous vous attendiez, vous pouvez le voir et tirer la parenthèse.
Les groupes nommés reçoivent le même traitement. Lorsque vous écrivez (?<year>\d{4})-(?<month>\d{2}), le testeur affiche les captures par nom — <year> et <month> — à côté de leurs équivalents numérotés, afin que vous puissiez confirmer les noms de la carte des tranches que vous souhaitez avant de vous fier. match.groups.year en code. Les groupes nommés rendent l'auto-documentation et le code plus lisibles, et les voir se résoudre correctement dans le testeur est le moyen le plus rapide de leur faire confiance.
Un piège associé à la surface du testeur : un groupe qui participe au modèle mais qui ne correspond pas à une tentative donnée s'affiche comme "pas de correspondance" plutôt qu'une chaîne vide. Cette distinction compte, car en Javascript, un tel groupe est undefined, et le code qui suppose que c'est toujours une chaîne lancera. Le voir signalé dans le testeur vous dit de garder cet accès.
De quelle saveur de regex est-ce, et pourquoi est-ce important ?
Les expressions régulières ne sont pas une langue. Le modèle qui fonctionne dans Python re Le module peut se comporter différemment - ou lancer - en JavaScript, et vice versa. ceci testeur Utilise le moteur JavaScript (ECMAScript) intégré à votre navigateur, qui est un octet pour octets, le même moteur que Node.js exécute. Donc, si vous écrivez JavaScript, TypeScript ou Code de nœud, les résultats ici sont exactement ce que votre code fera.
Cette précision coupe les deux sens. Si vous copiez un motif à partir d'une réponse de dépassement de pile, écrite pour PCRE (PHP, et le preg_ Les fonctions que j'utilise constamment dans WordPress Work) ou pour Python, certaines fonctionnalités ne se traduiront pas. JavaScript manquait historiquement de lookbehind, les a gagnés relativement récemment et gère toujours certaines propriétés Unicode différemment. Les quantificateurs possessifs et les groupes atomiques de PCRE n'existent pas du tout en JavaScript. La récursivité, une fonction PCRE pour la correspondance des structures imbriquées, n'a pas d'équivalent JavaScript.
Le résultat pratique : testez dans la saveur dans laquelle vous allez déployer. Un testeur qui implémente fidèlement un moteur est plus utile qu'un moteur qui implémente une moyenne floue de chacun d'entre eux, car "il a fonctionné dans le testeur" doit signifier "cela fonctionnera dans mon code." Pour PHP et WordPress, je garde les différences à l'esprit et vérifie séparément le côté serveur ; pour tout JavaScript, ce testeur. est la source de la vérité. La boîte à outils plus large pour ce type de vérification analytique est couverte dans le Guide des outils de codage.
Quelles sont les utilisations quotidiennes d'un testeur de regex ?
Création et débogage de modèles de validation
Champs de messagerie, numéros de téléphone, codes postaux, limaces, chaînes de version sémantique - chaque formulaire valide quelque chose et la validation est généralement une regex. Le testeur vous permet de lancer les cas maladroits sur votre modèle avant qu'il n'envoye : l'e-mail avec une étiquette d'adressage plus, le numéro de téléphone avec une extension, la chaîne de version comme 1.10.0 qu'un modèle naïf tronque. Collez une colonne de valeurs réelles et regardez celles qui ne correspondent pas.
Extraction de données à partir de journaux
Les journaux de serveurs, les journaux d'application et les exportations CSV sont des textes semi-structurés, et la regex est la façon dont vous en retirez les champs. Les groupes de captures captent l'horodatage, le niveau, l'ID de la demande. La répartition par groupe du testeur par match est exactement la vue dont vous avez besoin ici - collez une douzaine de lignes de journal réelles et confirmez que chaque champ atterrit dans le bon groupe, pas seulement la première ligne bien rangée. Cela s'accorde avec le Workflow de débogage de l'API où les corps et les en-têtes de réponse sont éraflés pour des valeurs spécifiques.
Rechercher et remplacer dans une base de code
Les éditeurs et les IDE prennent en charge la regex dans la recherche et le remplacement, et un mauvais modèle peut y être réécrit beaucoup plus que prévu. tester le s'un Côté dans un testeur dédié avant d'exécuter l'assurance Remplace est bon marché - voyez exactement ce que le modèle sélectionne dans un échantillon représentatif, puis exécutez le remplacement en toute confiance. Mon désastre de redirection-map était fondamentalement une recherche et un remplacement que je n'ai jamais testés en premier.
Apprentissage et enseignement du regex
La mise en évidence en direct fait du testeur un véritable outil d'apprentissage. Créez un jeton de modèle à la fois et regardez le jeu de matchs rétrécir et grandir à mesure que vous ajoutez des ancres, des quantificateurs et des classes. vue \d+ Prenez un nombre entier puis \d Saisissez un seul chiffre fait plus pour la compréhension que toute explication en prose. Lorsque vous êtes prêt à assembler un motif à partir de composants plutôt que de déboguer un modèle existant, le Regex Builder est l'outil compagnon.
Comment éviter le piège de correspondance de longueur nulle ?
Un modèle qui peut correspondre à une chaîne vide — a*, \d*, (foo)? — Peut "correspondre" à chaque position entre les personnages, produisant un flot d'allumettes vides. Le code de correspondance naïf qui n'avance pas à jamais une boucle de correspondance de longueur nulle. le testeur s'en préoccupe intérieurement en avançant toujours, donc ça ne pend jamais, mais il semblant vous les matchs vides.
Cet affichage est une fonctionnalité, pas un bruit. Un tas de correspondances vides est le testeur qui vous dit que votre quantificateur est trop permissif. Si vous vouliez dire "un ou plusieurs chiffres", vous avez écrit \d* Quand tu voulais \d+. Si un groupe est requis, vous l'avez marqué en option avec ?. Voir les correspondances vides est le diagnostic qui vous indique le correctif. Lorsque votre modèle est correct, les correspondances sont les sous-chaînes qui vous intéressent et rien d'autre.
Javascript Regex vs Autres saveurs : une comparaison rapide
| figure | Javascript (ce testeur) | PCRE (PHP) | python re |
|---|---|---|---|
| Groupes nommés | (?<name>...) |
(?<name>...) ou (?P<name>...) |
(?P<name>...) |
| regard derrière | Prise en charge (moteurs modernes) | soutenu | soutenu |
| Groupes atomiques / possessifs | Non pris en charge | soutenu | limité |
| récursion | Non pris en charge | soutenu | Non pris en charge |
| Point correspond au drapeau de la nouvelle ligne | s (Dotall) |
s (Dotall) |
re.DOTALL |
Propriété Unicode \p{...} |
exige u drapeau |
exige u modificateur |
regex Module uniquement |
| Accord collant | y drapeau |
\G ancre |
\G-comme via match poste |
La leçon de la table est que "regex" est une famille, pas une norme. La syntaxe se chevauche suffisamment pour vous endormir à la copie de modèles dans les langues, et les différences sont exactement les fonctionnalités avancées que vous recherchez sur les problèmes difficiles. Testez votre saveur cible. Pour JavaScript et Node, c'est ce testeur ; Boîte à outils pour les développeurs Web Couvre l'emplacement des autres outils spécifiques à la langue.
Est-il sûr de tester la regex par rapport au texte sensible ?
Le texte sur lequel vous testez la regex est souvent le type sensible : lignes de journal de production avec adresses IP et ID utilisateur, exportations avec adresses e-mail, fichiers de configuration avec noms d'hôte internes. C'est précisément les données que vous ne devrait pas Collez dans un outil qui l'expédie à un serveur.
le Testeur de Regex Toolz.dev Fonctionne entièrement dans votre navigateur. La compilation de motifs, la correspondance, l'extraction de groupe - tout cela est un Javascript côté client, sans aucune demande de réseau transportant votre modèle ou votre texte n'importe où. Coupez votre connexion après le chargement de la page et qu'elle continue de fonctionner. C'est une garantie d'architecture, pas une phrase de politique de confidentialité, et c'est le même principe de premier navigateur derrière chaque outil de l'ensemble, présenté dans le Guide de confidentialité des données.
Ce qui signifie que vous pouvez coller les véritables lignes de journal - celles avec les PII qui font apparaître un motif de boîtiers de bordure - et déboguer contre eux en toute sécurité. C'est tout le point : le testeur n'est utile que si vous lui donnez une véritable entrée, et la véritable entrée est souvent exactement ce que vous ne pouvez pas envoyer au serveur de quelqu'un d'autre.
FAQ
Comment tester une expression régulière en ligne ?
Entrez votre modèle dans le champ de motif sans les barres obliques environnantes, choisissez vos drapeaux et collez un exemple de texte dans la zone de test. Les matchs en surbrillance instantanément et les groupes de capture sont répertoriés pour chaque match. Tout fonctionne dans votre navigateur, rien n'est téléchargé.
Quelle saveur de regex ce testeur utilise-t-il ?
Il utilise le moteur JavaScript (ECMAScript) RegExp intégré à votre navigateur, identique à celui de Node.js. Les résultats correspondent au comportement du même modèle en JavaScript et TypeScript. JavaScript Regex diffère de PCRE, Python's Re Module et Java Patterns dans certaines fonctionnalités avancées telles que Atomic Groups et Recursion, alors testez la saveur dans laquelle vous allez déployer.
Que signifient les drapeaux regex g, i, m et s?
Le drapeau G (global) trouve tous les matchs au lieu de s'arrêter au premier. Le drapeau i rend la correspondance insensible à la casse. Le drapeau M (multiline) fait correspondre les ancres ^ et $ lors des sauts de ligne plutôt que uniquement le début et la fin de la chaîne. L'indicateur S (dotall) permet également au point de correspondance des caractères de la nouvelle ligne. Les drapeaux M et S sont souvent confondus - M change les ancres, S change le point.
Comment fonctionnent les groupes de capture dans le testeur ?
Les parenthèses de votre modèle créent des groupes de capture. Le testeur répertorie chaque groupe numéroté avec le texte qu'il a capturé pour chaque correspondance, afin que vous puissiez vérifier quelle tranche de la chaîne de chaque partie du motif est saisie. Groupes nommés écrits sous (?...) sont indiqués par nom aux côtés des groupes numérotés.
Pourquoi mon regex ne correspond-il à rien ou génère-t-il une erreur ?
Un modèle qui ne correspond à rien a généralement un caractère sur-spécifique ou un caractère spécial non évadé comme un point littéral ou un signe plus. Un modèle qui génère une erreur a un problème de syntaxe, comme une parenthèse ou une parenthèse asymétrique. Le testeur affiche le message d'erreur exact du moteur afin que vous puissiez localiser rapidement le problème.
Comment faire correspondre plusieurs lignes ?
Activez le drapeau S (dotall) si vous avez besoin des sauts de ligne point à étaler, et activez le drapeau M (multilin) si vous souhaitez que les ancres ^ et $ correspondent au début et à la fin de chaque ligne. La combinaison des deux permet à un seul motif de fonctionner naturellement contre les entrées multilignes telles que les journaux ou les lignes CSV.
Est-il sûr de tester la regex par rapport aux données sensibles ?
Oui. Toute correspondance se produit en JavaScript dans votre navigateur. Aucun modèle ou texte de test n'est envoyé à un serveur, rien n'est enregistré et l'outil fonctionne avec votre connexion désactivée. Vous pouvez tester en toute sécurité contre les fichiers journaux, les données personnelles ou les formats propriétaires.
Quelle est la différence entre un testeur de regex et un constructeur de regex ?
Un testeur de regex exécute un modèle existant sur le texte afin que vous puissiez le vérifier et le déboguer, tandis qu'un générateur de regex vous aide à construire un modèle à partir de composants ou de modèles courants. Utilisez le Regex Builder sur ce site pour assembler un modèle, puis apportez-le au testeur pour le vérifier par rapport aux données d'échantillon réelles.
Les expressions régulières restent en écriture uniquement jusqu'à ce que vous les exécutez contre de véritables entrées, et les échecs sont silencieux - rien ne correspond, trop de correspondances, les mauvaises captures de groupe et aucune erreur ne vous le dit. Un testeur rend visible le motif : Collez votre regex, nourrissez-le le texte réel et laid et regardez exactement ce qu'il saisit avant de saisir la mauvaise chose en production.
