Reguläre Ausdrücke in TypeScript: Ein vollständiger Leitfaden für Anfänger

Reguläre Ausdrücke in TypeScript: Von der Theorie zur Praxis

Reguläre Ausdrücke (regexp oder regex) sind ein leistungsstarkes Werkzeug zum Suchen, Ersetzen und Überprüfen von Zeichenketten anhand eines bestimmten Musters. In TypeScript, wie auch in JavaScript, sind reguläre Ausdrücke eine integrierte Sprachfunktion. Dieser Artikel hilft Ihnen, die Syntax zu erlernen, regex praktisch anzuwenden und typische Fehler zu vermeiden.

Was ist ein regulärer Ausdruck und wie erstellt man ihn in TypeScript

Ein regulärer Ausdruck ist eine Zeichenfolge, die ein Suchmuster beschreibt. In TypeScript gibt es zwei Möglichkeiten, einen regulären Ausdruck zu erstellen:

• Literal-Syntax: /Muster/Flags
• RegExp-Konstruktor: new RegExp('Muster', 'Flags')

Die erste Methode eignet sich für statische Muster, die zweite, wenn das Muster dynamisch erstellt wird.

// Literal-Syntaxconst emailPattern: RegExp = /^[\\w-\\.]+@([\\w-]+\\.)+[\\w-]{2,4}$/;

// RegExp-Konstruktorconst dynamicPattern: string = "hello";const regexFromString: RegExp = new RegExp(dynamicPattern, "gi");

console.log(emailPattern.test("test@example.com")); // trueconsole.log(regexFromString.test("Hello world")); // true

Wichtige Methoden für die Arbeit mit regulären Ausdrücken

In TypeScript stehen drei wichtige Methoden für die Arbeit mit regex zur Verfügung. Betrachten wir jede anhand von Beispielen.

Die Methode test() — Prüfung auf Übereinstimmung

Gibt true oder false zurück. Ideal für die Validierung.

const hasNumber: RegExp = /\\d+/;console.log(hasNumber.test("abc123")); // trueconsole.log(hasNumber.test("abc"));    // false

Die Methode exec() — Suche mit Details

Gibt ein Array mit der Übereinstimmung und zusätzlichen Informationen zurück (Index, ursprüngliche Zeichenkette). Bei Verwendung des Flags g merkt es sich die Position der letzten Übereinstimmung.

const wordPattern: RegExp = /(\\w+)\\s(\\w+)/;const result = wordPattern.exec("Hello TypeScript");if (result) {    console.log(`Vollständige Übereinstimmung: ${result[0]}`); // Hello TypeScript    console.log(`Erste Gruppe: ${result[1]}`);      // Hello    console.log(`Zweite Gruppe: ${result[2]}`);      // TypeScript    console.log(`Index: ${result.index}`);          // 0}

Die Methode match() — Suche aller Übereinstimmungen

Wird auf der Zeichenkette aufgerufen, nicht auf dem regulären Ausdruck. Mit dem Flag g gibt es ein Array aller Übereinstimmungen zurück.

const text: string = "Preis: 100 Rubel, Rabatt: 20 Rubel";const prices: RegExp = /\\d+/g;const foundPrices: string[] | null = text.match(prices);console.log(foundPrices); // ['100', '20', '0']

Syntax und häufig verwendete Zeichen

Um effektive reguläre Ausdrücke zu schreiben, müssen Sie die grundlegenden Zeichen und ihre Bedeutungen kennen.

• . — jedes beliebige Zeichen außer Zeilenumbruch
• \\d — eine Ziffer (entspricht [0-9])
• \\w — Buchstabe, Ziffer oder Unterstrich ([a-zA-Z0-9_])
• \\s — jedes Leerzeichen (Leerzeichen, Tabulator, neue Zeile)
• ^ — Anfang der Zeichenkette
• $ — Ende der Zeichenkette
• * — 0 oder mehr Wiederholungen
• + — 1 oder mehr Wiederholungen
• ? — 0 oder 1 Wiederholung (macht den Quantifizierer lazy)
• [] — Zeichengruppe (z.B. [a-z] — alle Kleinbuchstaben)
• () — Erfassungsgruppe
• | — logisches ODER

// Beispiele für die Verwendung von Zeichenconst phonePattern: RegExp = /^\\+?7?\\d{10}$/;console.log(phonePattern.test("+79161234567")); // true

const datePattern: RegExp = /^\\d{2}\\.\\d{2}\\.\\d{4}$/;console.log(datePattern.test("31.12.2023")); // true\