Das `RegExp`-Objekt

Dieser Artikel erklärt das RegExp-Objekt.

Wir erklären das RegExp-Objekt anhand praktischer Beispiele.

YouTube Video

Das RegExp-Objekt

Was ist RegExp?

RegExp (Regulärer Ausdruck) ist ein Objekt, das Muster für Zeichenketten darstellt. Anders als bei einfachen Zeichenvergleichen können Sie 'Zeichenfolgen, die bestimmte Bedingungen erfüllen' flexibel definieren.

Durch die Verwendung eines RegExp-Objekts können Sie Operationen wie Suchen, Validieren, Extrahieren und Ersetzen von Zeichenfolgen präzise und übersichtlich durchführen. Es ist äußerst effektiv für alltägliche Aufgaben wie die Validierung von Formulareingaben, die Protokollanalyse und die Textformatierung. Im Folgenden finden Sie einige einfache Beispiele für reguläre Ausdrücke.

1const pattern = /abc/;

• Dieser reguläre Ausdruck prüft, ob die Sequenz 'abc' enthalten ist.

Wie erstellt man reguläre Ausdrücke (zwei Methoden)

Es gibt zwei Arten der RegExp-Syntax: Literal-Schreibweise und Konstruktor-Schreibweise.

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+");

• Die Literal-Notation ist prägnant und gut lesbar, weshalb sie sich für als Konstanten verwendete reguläre Ausdrücke eignet.. Die Konstruktor-Notation hingegen wird verwendet, wenn das Muster mithilfe von Variablen erstellt oder der Inhalt zur Laufzeit bestimmt werden soll.
• Mit der Literal-Notation können regulärer Ausdruck und Flags intuitiv gemeinsam angegeben werden. Im Gegensatz dazu müssen bei der Konstruktor-Notation Muster und Flags getrennt angegeben werden.
• Außerdem wird bei der Konstruktor-Notation der reguläre Ausdruck als String übergeben, sodass Backslashes doppelt maskiert werden müssen.

test(): Die grundlegendste Validierung

Das RegExp-Objekt bietet Methoden zur Auswertung und Verarbeitung von Zeichenfolgen mit regulären Ausdrücken. test() ist eine Methode, die einen booleschen Wert zurückgibt, der angibt, ob das Muster passt.

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

• Dies ist die erste Methode, die man lernen sollte, und sie ist ideal für bedingte Verzweigungen oder die Eingabevalidierung.

match(): Übereinstimmungen erhalten

match() gibt ein Array mit dem passenden String und weiteren Details zurück.

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

• match() ist für Extraktions- und Parsingprozesse praktischer als test().

replace(): Ersetzen mit regulären Ausdrücken

replace() wandelt den passenden Teil in eine andere Zeichenkette um.

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

• Sie können es zur Protokollformatierung oder zum Normalisieren überflüssiger Leerzeichen verwenden.

Grundlagen der Flags (g, i, m)

Sie können 'Flags' in regulären Ausdrücken angeben. Flags sind Optionen, die steuern, wie ein regulärer Ausdruck Zeichenfolgen gemäß bestimmten Regeln verarbeitet. Selbst mit demselben Muster können sich die Ergebnisse je nach verwendeten Flags ändern.

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

• Das g-Flag (global) durchsucht die gesamte Zeichenfolge.
• Das i-Flag (ignore case) ignoriert Groß- und Kleinschreibung bei der Übereinstimmung.

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

• Das m-Flag (multiline) wird verwendet, um mehrzeilige Zeichenfolgen zeilenweise zu behandeln. Damit beziehen sich ^ und $ auf den Anfang bzw. das Ende jeder einzelnen Zeile statt auf die gesamte Zeichenfolge.

Zeichenklassen: Mehrere Möglichkeiten kombinieren

Mit eckigen Klammern [] kann eine Menge möglicher Zeichen für eine Position definiert werden.

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

• Das ist hilfreich, um Schreibvariationen und einfache Alternativen abzudecken.

Metazeichen: Häufig verwendete Abkürzungen

Metazeichen sind Symbole, mit denen häufig verwendete Muster in kürzerer Form geschrieben werden können.

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 steht für eine Ziffer, und {n} gibt die Anzahl der Wiederholungen an.

^ und $: Den gesamten String validieren

^ und $ kennzeichnen den Anfang und das Ende einer Zeichenkette.

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

• Sie sind wichtig, wenn eine exakte Übereinstimmung erforderlich ist, z.B. bei Formulareingaben.

Gruppieren und Erfassen

Durch die Verwendung von Klammern () können Sie Teilwerte extrahieren.

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

• Dies wird oft verwendet, um Datumsangaben und strukturierte Zeichenketten aufzuschlüsseln.

Häufige Fehler und wichtige Hinweise

Reguläre Ausdrücke sind mächtig, neigen aber dazu, schwer lesbar zu werden.

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

• Wenn es zu komplex wird, können Sie das Hinzufügen von Kommentaren, das Aufteilen von Ausdrücken oder das Überarbeiten des Prozesses selbst in Betracht ziehen.

Zusammenfassung

RegExp ist eine unverzichtbare Basisfunktion in JavaScript, um die Zeichenkettenverarbeitung einfach und präzise zu beschreiben. Sie müssen nicht von Anfang an komplexe reguläre Ausdrücke lernen; es ist wichtig, die grundlegenden Methoden und die Syntax wie test, match und replace gemäß Ihren praktischen Anforderungen zu verwenden. Wenn Sie reguläre Ausdrücke nicht als 'Spezialwissen', sondern als 'Werkzeuge zur strukturierten Musterbeschreibung' betrachten, können Sie die Qualität und Lesbarkeit von Eingabevalidierung und Textverarbeitung erheblich steigern.

Sie können den obigen Artikel mit Visual Studio Code auf unserem YouTube-Kanal verfolgen. Bitte schauen Sie sich auch den YouTube-Kanal an.

YouTube Video