Het `RegExp`-object

Dit artikel legt het RegExp-object uit.

We leggen het RegExp-object uit met praktische voorbeelden.

YouTube Video

Het RegExp-object

Wat is RegExp?

RegExp (Reguliere Expressie) is een object dat wordt gebruikt om patroonreeksen te representeren. In tegenstelling tot eenvoudige tekenvergelijkingen kun je flexibel 'strings die aan bepaalde voorwaarden voldoen' definiëren.

Door een RegExp-object te gebruiken, kun je bewerkingen zoals zoeken, valideren, extraheren en vervangen van strings beknopt en duidelijk uitvoeren. Het is zeer effectief voor alledaagse taken zoals validatie van formulierinvoer, loganalyse en tekstopmaak. Hieronder staan enkele eenvoudige voorbeelden van reguliere expressies.

1const pattern = /abc/;

• Deze reguliere expressie controleert of de reeks 'abc' aanwezig is.

Hoe reguliere expressies te maken (Twee methoden)

Er zijn twee soorten RegExp-syntaxis: letterlijke notatie en constructor-notatie.

1// Literal notation: pattern and flags are written together
2const literal         = /hello/;
3const literalWithFlag = /hello/i;
4const literalDigits   = /\d+/;
5
6// Constructor notation: pattern and flags are passed separately
7const constructor         = new RegExp("hello");
8const constructorWithFlag = new RegExp("hello", "i");
9const constructorDigits   = new RegExp("\\d+");

• Letterlijke notatie is beknopt en leesbaar, waardoor het geschikt is voor reguliere expressies die als constanten worden gebruikt.. Aan de andere kant wordt constructornotatie gebruikt wanneer je het patroon met variabelen wilt opbouwen of de inhoud ervan tijdens de uitvoering wilt bepalen.
• Met letterlijke notatie kun je intuïtief zowel de reguliere expressie als de vlaggen samen beschrijven. Daarentegen moet je bij constructornotatie het patroon en de vlaggen afzonderlijk opgeven.
• Bovendien geef je bij constructornotatie de reguliere expressie als een tekenreeks door, waardoor backslashes tweemaal moeten worden geëscaped.

test(): De meest basale validatie

Het RegExp-object biedt methoden om evaluaties en bewerkingen uit te voeren met behulp van reguliere expressies. test() is een methode die een boolean retourneert die aangeeft of een patroon overeenkomt.

1const regex = /JavaScript/;
2
3console.log(regex.test("I love JavaScript")); // true
4console.log(regex.test("I love TypeScript")); // false

• Het is de eerste methode die je moet leren en ideaal voor conditionele vertakking of inputvalidatie.

match(): Haal overeenkomende resultaten op

match() retourneert een array met de overeenkomende string en gedetailleerde informatie.

1const text = "Version 1.2.3";
2const result = text.match(/\d+\.\d+\.\d+/);
3
4console.log(result[0]); // "1.2.3"

• match() is handiger dan test() voor extractie- en parseprocessen.

replace(): Vervangen met reguliere expressies

replace() zet het overeenkomende deel om in een andere string.

1const text = "Hello   World";
2const result = text.replace(/\s+/g, " ");
3
4console.log(result); // "Hello World"

• Je kunt het gebruiken voor het opmaken van logs of het normaliseren van onnodige witruimtes.

Basisprincipes van vlaggen (g, i, m)

Je kunt 'flags' specificeren in reguliere expressies. Flags zijn opties die bepalen hoe een reguliere expressie strings verwerkt volgens bepaalde regels. Zelfs met hetzelfde patroon kunnen de resultaten veranderen afhankelijk van de gebruikte flags.

1const text = "apple Apple APPLE";
2const regex = /apple/gi;        // or new RegExp("apple", "gi");
3
4console.log(text.match(regex)); // ["apple", "Apple", "APPLE"]

• De g (globale) flag zoekt door de hele string heen.
• De i (ignore case) flag negeert hoofdletter-/kleine letterverschillen bij het vergelijken.

1const multilineText = `apple
2banana
3apple`;
4
5const regexM = /^apple/gm;
6
7console.log(multilineText.match(regexM)); // ["apple", "apple"]

• De m (multiline) flag wordt gebruikt om meerregelige strings per regel te verwerken. Hierdoor werken ^ en $ op het begin of einde van elke regel, in plaats van op de hele string.

Tekenklassen: Meerdere kandidaten combineren

Met vierkante haken [] kun je een set mogelijke tekens voor één positie definiëren.

1const regex = /gr[ae]y/;
2
3console.log(regex.test("gray")); // true
4console.log(regex.test("grey")); // true

• Dit is handig voor het toestaan van spellingvariaties en eenvoudige alternatieven.

Metatekens: Veelgebruikte snelkoppelingen

Metatekens zijn symbolen waarmee je veelgebruikte patronen in een kortere vorm kunt schrijven.

1const regex = /\d{4}-\d{2}-\d{2}/;  // or new RegExp("\\d{4}-\\d{2}-\\d{2}");
2
3console.log(regex.test("2025-12-29")); // true

• \d betekent een cijfer, en {n} geeft het aantal herhalingen aan.

^ en $: Valideer de volledige tekenreeks

^ en $ duiden het begin en einde van een string aan.

1const regex = /^\d+$/;
2
3console.log(regex.test("123"));   // true
4console.log(regex.test("123a"));  // false

• Ze zijn belangrijk in situaties waar een exacte overeenkomst vereist is, zoals bij formulierinvoer.

Groeperen en vastleggen

Door haakjes () te gebruiken, kun je gedeeltelijke waarden extraheren.

1const text = "2025/12/29";
2const regex = /(\d{4})\/(\d{2})\/(\d{2})/;
3const [, year, month, day] = text.match(regex);
4
5console.log(year, month, day); // 2025 12 29

• Dit wordt vaak gebruikt voor het opsplitsen van data en gestructureerde tekenreeksen.

Veelgemaakte fouten en aandachtspunten

Reguliere expressies zijn krachtig, maar worden vaak moeilijk leesbaar.

1// Hard to read
2const regex = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+$/;

• Als het te complex wordt, kun je overwegen om opmerkingen toe te voegen, expressies op te splitsen of het proces zelf te herzien.

Samenvatting

RegExp is een essentiële basisfunctie in JavaScript om tekenverwerking eenvoudig en nauwkeurig te beschrijven. Je hoeft niet meteen complexe reguliere expressies te leren; het is belangrijk om basis-methoden en -syntaxis zoals test, match en replace toe te passen op basis van je praktische behoeften. Als je reguliere expressies niet als 'speciale kennis', maar als 'hulpmiddelen voor gestructureerde patroonweergave' beschouwt, verbeter je de kwaliteit en leesbaarheid van invoervalidatie en tekstverwerking aanzienlijk.

Je kunt het bovenstaande artikel volgen met Visual Studio Code op ons YouTube-kanaal. Bekijk ook het YouTube-kanaal.

YouTube Video