Regex-tester — Online tester voor JavaScript reguliere expressies _

Hoe werkt regex in je browser?

Elke JavaScript-runtime levert een ingebouwde regex-engine — new RegExp(pattern, flags) compileert je patroon, en methodes als String.prototype.match, String.prototype.replace en RegExp.prototype.exec draaien het op elke invoerstring. Deze tester verpakt die engine in een UI, zodat je patronen kunt bewerken, uitvoeren en inspecteren zonder je browser te verlaten. Niets van wat je typt — patroon, vlaggen, teststring of vervanging — wordt over het netwerk verzonden.

Hoe werkt de regex-tester?

De pipeline bestaat uit een paar korte stappen, die allemaal client-side draaien bij elke toetsaanslag (met 150 ms debounce, zodat het typen vloeiend blijft):

1. De body van je patroon wordt uit het invoerveld hierboven gelezen (geen /-delimiters aan begin of eind — die zijn decoratief). De geselecteerde vlag-pillen worden samengevoegd tot een vlag-string als gi of gimsuy.
2. new RegExp(patternBody, flags) compileert het patroon. Als de engine een SyntaxError gooit (bv. een niet-gepaarde haakje of een ongeldige escape), wordt de melding boven de teststring weergegeven en de matchlijst gewist. De compileerfout is de echte err.message uit V8 / SpiderMonkey / JavaScriptCore, dus komt overeen met wat je in de DevTools zou zien.
3. Voor de matchlijst somt de tester altijd op met een synthetische global-vlag — zelfs als je g uitzet, toont de lijst nog steeds elke match. De standaardbescherming tegen nul-breedte-matches (if (m.index === rx.lastIndex) rx.lastIndex++) voorkomt dat de lus oneindig draait op patronen die op een lege string matchen. De vervangmodus respecteert je echte vlaggenset, zodat $& zich gedraagt als String.prototype.replace.
4. Tussen elke iteratie controleert de tester performance.now() - start en breekt af zodra er 50 ms verstreken zijn. Dit beschermt tegen catastrofale backtracking bij invoer als (a+)+$ op een lange reeks a's — anders zou het tabblad vastlopen. De bescherming is best-effort: een pathologisch enkel-match-patroon kan binnen één exec-aanroep nog steeds tijd verbruiken. Als dat gebeurt, ververs het tabblad en herschrijf het patroon met een niet-gulzige kwantor of een atomische possessieve stijl (bv. [^x]*x).
5. De teststring wordt op het bereik van elke match in segmenten gesplitst en de matchende segmenten worden in <mark class="rx-match rx-cap-N">-elementen verpakt, waarbij N cyclisch zes paletkleuren doorloopt zodat aangrenzende matches in één oogopslag te onderscheiden zijn. De genummerde groepen (m[1], m[2], …) en benoemde groepen (m.groups) van elke match worden eronder als gelabelde rijen getoond; als de d-vlag actief is, worden ook de [start, end]-indices per groep getoond.

Waarom deze regex-tester gebruiken?

• Privacy: elk patroon, elke teststring en elke vervanging draait in je browser via de ingebouwde JavaScript-RegExp-engine. Niets verlaat het tabblad — belangrijk als de invoer een klantlog, een gelekt credential-patroon of iets anders is dat je niet in een gehoste SaaS-regex-playground zou plakken.
• Eerlijke smaak: de tester toont exact de regex-engine die Node.js, Chrome, Safari, Firefox en elke browsergebaseerde formuliervalidator gebruikt. Er is geen Perl-smaakvertaallaag die subtiele verschillen verbergt — wat hier werkt, werkt in je code.
• Debuggen van capture- en benoemde groepen: elke genummerde groep ($1, $2, …) en benoemde groep ($<year>) wordt per match getoond, zodat je een parser kunt bouwen en de slots zonder gokken kunt aflezen. De vervangmodus laat je groepen vrij combineren — $2-$1 wisselt de eerste twee slots, $<name> plaatst een benoemde slot, en $& herhaalt de hele match.
• Bescherming tegen catastrofale backtracking: een plafond van 50 ms op de opsomming breekt pathologische patronen als (a+)+$ af voordat ze het tabblad bevriezen. Je ziet een verklarende foutmelding in plaats van een vastgelopen browser, en de pagina herstelt zich meteen.

Wat zijn veelvoorkomende toepassingen van een regex-tester?

Reguliere expressies duiken op bij webontwikkeling, beveiliging en datawerk — deze tester mikt op de meest voorkomende gebruiksscenario's:

• Formuliervalidatie: prototype een e-mail-, telefoon- of postcodepatroon, plak voorbeeld-invoer in de teststring en bevestig dat elk positief geval matcht en elk negatief geval niet, voordat je het patroon naar productiecode brengt.
• Log scraping: plak een stuk NGINX-, applicatie- of audit-loguitvoer, schrijf een patroon met benoemde groepen voor de onderdelen die ertoe doen ((?<ip>…) (?<path>…)) en lees de vastgelegde slots per match om te bevestigen dat je parser klopt.
• Zoek-en-vervang voor refactor: gebruik de vervangmodus om identifiers in een snippet te herschrijven — (\w+)\.set(\w+)\( → $1.$2 = verandert setter-aanroepen in property-toewijzingen, en de live preview toont het resultaat voordat je het in een codemod vastlegt.

Hoe ziet een regex-voorbeeld eruit?

Neem het patroon (\d{4})-(\d{2})-(\d{2}) met de g-vlag, uitgevoerd op de teststring release 2025-11-15, prerelease 2026-05-25. De engine vindt twee matches. De eerste is 2025-11-15 met groep 1 = 2025, groep 2 = 11, groep 3 = 15. De tweede is 2026-05-25 met dezelfde groepsvorm. In de vervangmodus schrijft het vervangsjabloon $3/$2/$1 beide data om naar 15/11/2025 en 25/05/2026 — een ISO-naar-DMY-conversie met één patroon die je visueel kunt verifiëren voordat je het patroon in een script plugt.

Gebruik deze tester als de snelle weg voor elk regex-werk — patronen bouwen, debuggen of herschrijven. Alles draait lokaal; niets wordt gelogd; de regex-engine is die van je browser, dus het gedrag komt overeen met wat productiecode op runtime ziet.