Interactieve RegexLearn-trainer helpt je regex onder de knie te krijgen zonder de frustratie

Reguliere expressies roepen gemengde gevoelens op bij ontwikkelaars. Meestal kopiëren we kant-en-klare patronen van Stack Overflow of vragen we een AI om een e-mailvalidatiepatroon te schrijven. Wanneer een regex plotseling breekt op een grensgeval, moet je een debugger openen en lang naar een onleesbare puinhoop van haakjes en schuine strepen staren.

Ik ontdekte onlangs RegexLearn, een open-source interactieve stap-voor-stap trainer die de complexe syntaxis van reguliere expressies opsplitst in eenvoudige praktische oefeningen.

Wat zit er in het project

De auteur, Aykut Kardash, bouwde een webplatform waar leren is opgesplitst in korte interactieve stappen. Je leest niet alleen theorie—je typt meteen tekens in het antwoordveld en ziet matches oplichten in de tekst.

In tegenstelling tot droge naslagwerken gebruikt het een gamified leeraanpak. Elk scherm geeft een korte uitleg van één syntaxiselement, een tekstblok en een specifieke taak: bepaalde woorden, cijfers of symbolen markeren. De volgende stap wordt niet ontgrendeld totdat je een werkend patroon schrijft.

Het project is vertaald in 21 talen, waaronder Russisch. De localisatie is goed gedaan, met termen duidelijk vertaald en zonder enige machinevertaling-smaak.

Belangrijkste functies van de trainer

De repository bevat verschillende onafhankelijke secties. Ze dekken verschillende behoeften, van eerste introductie tot dagelijks stringwerk.

Stapsgewijze cursussen

De site biedt twee afzonderlijke tracks:

• Regex 101 Basics. Het begeleidt je van het matchen van enkele letters tot quantifiers, greedy en lazy matching, capture groups en lookahead/lookbehind assertions.
• Regex for SEO Practice. Gericht op SEO-specialisten en webmasters. Het behandelt URL-filtering, redirect-configuratie en webserver log-parsing.

Ingebouwde speelplaats en spiekbriefje

Wanneer je snel een expressie tegen echte data wilt testen, komt de Playground-tab goed van pas. Het is een schone sandbox die volledig in de browser draait en je teststrings niet naar de server stuurt.

In de buurt vind je een interactief spiekbriefje. Het somt alle belangrijke constructies op met korte hints, search flags en werkende voorbeelden.

Toetsenbordnavigatie

De interface is zo ontworpen dat je de muis helemaal aan de kant kunt leggen. Navigeren tussen lessen, velden wissen, oplossingen controleren en hints oproepen werkt allemaal via vertrouwde hotkeys.

Technische stack en het project lokaal uitvoeren

De codebase is overzichtelijk en gemakkelijk te volgen. Het project is gebouwd op Next.js met TypeScript en gestyled met Tailwind CSS.

Als je het platform op je machine wilt draaien of de broncode wilt verkennen, duurt het proces slechts een paar minuten:

# Клонируем репозиторий и ставим зависимости
git clone https://github.com/aykutkardas/regexlearn.com.git
cd regexlearn.com
npm install

# Запускаем локальный сервер разработки
npm run dev

De lokale versie wordt geopend op http://localhost:3003.

De localisatie-architectuur is eenvoudig. Alle vertalingen leven in de src/localization/ map als aparte JSON-bestanden. Om een nieuwe taal toe te voegen of een onnauwkeurigheid in de bestaande Russische vertaling te corrigeren, bewerk je gewoon de relevante JSON-structuren en dien je een pull request in naar de develop branch.

Projectsponsors:

Voor wie is deze repository nuttig

RegexLearn is de moeite waard om te openen in drie typische situaties:

1. Je bent net begonnen met programmeren en de syntaxis van reguliere expressies intimideert je.
2. Je programmeert al een tijdje maar verwart constant de syntaxis van lookbehind en lookahead assertions.
3. Je bent bezig met het inwerken van juniors en zoekt duidelijk interactief oefenmateriaal.
4. Je moet regelmatig Nginx, Apache configureren of analyticsrapporten parsen.

Het platform is gratis, open source onder de MIT-licentie en niet overladen met onnodige theorie. Het doorlopen van de basis-track kost maximaal een uur of twee, maar het begrip van de structuur van reguliere expressies blijft je lang bij. Als je dit onderwerp hebt uitgesteld, bekijk dan de projectpagina.