JavaScript-Mustermatching mit regulären Ausdrücken: Ein umfassender Leitfaden

Reguläre Ausdrücke (Regex) sind ein mächtiges Werkzeug für den Musterabgleich und die Textmanipulation in JavaScript. Sie ermöglichen es Entwicklern, Zeichenketten basierend auf definierten Mustern zu suchen, zu validieren und zu transformieren. Dieser Leitfaden bietet einen umfassenden Überblick über reguläre Ausdrücke in JavaScript und behandelt Syntax, Verwendung und fortgeschrittene Techniken.

Was sind reguläre Ausdrücke?

Ein regulärer Ausdruck ist eine Sequenz von Zeichen, die ein Suchmuster definieren. Diese Muster werden verwendet, um Zeichenketten abzugleichen und zu manipulieren. Reguläre Ausdrücke werden in der Programmierung häufig für Aufgaben wie die folgenden verwendet:

• Datenvalidierung: Sicherstellen, dass Benutzereingaben bestimmten Formaten entsprechen (z. B. E-Mail-Adressen, Telefonnummern).
• Datenextraktion: Abrufen spezifischer Informationen aus Text (z. B. Extrahieren von Daten, URLs oder Preisen).
• Suchen und Ersetzen: Finden und Ersetzen von Text basierend auf komplexen Mustern.
• Textverarbeitung: Teilen, Verbinden oder Transformieren von Zeichenketten basierend auf definierten Regeln.

Erstellen von regulären Ausdrücken in JavaScript

In JavaScript können reguläre Ausdrücke auf zwei Arten erstellt werden:

1. Verwendung eines Literals für reguläre Ausdrücke: Das Muster wird in Schrägstriche (/) eingeschlossen.
2. Verwendung des RegExp-Konstruktors: Erstellen eines RegExp-Objekts mit dem Muster als Zeichenkette.

Beispiel:

// Verwendung eines Literals für reguläre Ausdrücke
const regexLiteral = /hello/;

// Verwendung des RegExp-Konstruktors
const regexConstructor = new RegExp("hello");

Die Wahl zwischen den beiden Methoden hängt davon ab, ob das Muster zur Kompilierzeit bekannt ist oder dynamisch generiert wird. Verwenden Sie die Literal-Notation, wenn das Muster feststeht und im Voraus bekannt ist. Verwenden Sie den Konstruktor, wenn das Muster programmatisch erstellt werden muss, insbesondere bei der Einbindung von Variablen.

Grundlegende Regex-Syntax

Reguläre Ausdrücke bestehen aus Zeichen, die das abzugleichende Muster darstellen. Hier sind einige grundlegende Regex-Komponenten:

• Literale Zeichen: Passen auf die Zeichen selbst (z. B. passt /a/ auf das Zeichen 'a').
• Metazeichen: Haben spezielle Bedeutungen (z. B. ., ^, $, *, +, ?, [], {}, (), \, |).
• Zeichenklassen: Repräsentieren Sätze von Zeichen (z. B. passt [abc] auf 'a', 'b' oder 'c').
• Quantifizierer: Geben an, wie oft ein Zeichen oder eine Gruppe vorkommen soll (z. B. *, +, ?, {n}, {n,}, {n,m}).
• Anker: Passen auf Positionen in der Zeichenkette (z. B. passt ^ auf den Anfang, $ auf das Ende).

Häufige Metazeichen:

• . (Punkt): Passt auf jedes einzelne Zeichen außer dem Zeilenumbruch.
• ^ (Caret): Passt auf den Anfang der Zeichenkette.
• $ (Dollar): Passt auf das Ende der Zeichenkette.
• * (Sternchen): Passt auf null oder mehr Vorkommen des vorhergehenden Zeichens oder der vorhergehenden Gruppe.
• + (Plus): Passt auf ein oder mehrere Vorkommen des vorhergehenden Zeichens oder der vorhergehenden Gruppe.
• ? (Fragezeichen): Passt auf null oder ein Vorkommen des vorhergehenden Zeichens oder der vorhergehenden Gruppe. Wird für optionale Zeichen verwendet.
• [] (eckige Klammern): Definiert eine Zeichenklasse, die auf jedes einzelne Zeichen innerhalb der Klammern passt.
• {} (geschweifte Klammern): Gibt die Anzahl der zu findenden Vorkommen an. {n} passt genau n-mal, {n,} passt n-mal oder öfter, {n,m} passt zwischen n- und m-mal.
• () (runde Klammern): Gruppiert Zeichen zusammen und erfasst die übereinstimmende Teilzeichenkette.
• \ (Backslash): Escaped Metazeichen, sodass Sie sie buchstäblich abgleichen können.
• | (Pipe): Wirkt als „oder“-Operator und passt entweder auf den Ausdruck davor oder danach.

Zeichenklassen:

• [abc]: Passt auf eines der Zeichen a, b oder c.
• [^abc]: Passt auf jedes Zeichen, das *nicht* a, b oder c ist.
• [a-z]: Passt auf jeden Kleinbuchstaben von a bis z.
• [A-Z]: Passt auf jeden Großbuchstaben von A bis Z.
• [0-9]: Passt auf jede Ziffer von 0 bis 9.
• [a-zA-Z0-9]: Passt auf jedes alphanumerische Zeichen.
• \d: Passt auf jede Ziffer (entspricht [0-9]).
• \D: Passt auf jedes Nicht-Ziffer-Zeichen (entspricht [^0-9]).
• \w: Passt auf jedes Wortzeichen (alphanumerisch plus Unterstrich; entspricht [a-zA-Z0-9_]).
• \W: Passt auf jedes Nicht-Wortzeichen (entspricht [^a-zA-Z0-9_]).
• \s: Passt auf jedes Whitespace-Zeichen (Leerzeichen, Tabulator, Zeilenumbruch usw.).
• \S: Passt auf jedes Nicht-Whitespace-Zeichen.

Quantifizierer:

• *: Passt auf das vorhergehende Element null oder mehr Male. Zum Beispiel passt a* auf "", "a", "aa", "aaa" und so weiter.
• +: Passt auf das vorhergehende Element ein oder mehrere Male. Zum Beispiel passt a+ auf "a", "aa", "aaa", aber nicht auf "".
• ?: Passt auf das vorhergehende Element null oder einmal. Zum Beispiel passt a? auf "" oder "a".
• {n}: Passt auf das vorhergehende Element genau *n*-mal. Zum Beispiel passt a{3} auf "aaa".
• {n,}: Passt auf das vorhergehende Element *n*-mal oder öfter. Zum Beispiel passt a{2,} auf "aa", "aaa", "aaaa" und so weiter.
• {n,m}: Passt auf das vorhergehende Element zwischen *n*- und *m*-mal (einschließlich). Zum Beispiel passt a{2,4} auf "aa", "aaa" oder "aaaa".

Anker:

• ^: Passt auf den Anfang der Zeichenkette. Zum Beispiel passen ^Hello auf Zeichenketten, die mit "Hello" *beginnen*.
• $: Passt auf das Ende der Zeichenkette. Zum Beispiel passen World$ auf Zeichenketten, die mit "World" *enden*.
• \b: Passt auf eine Wortgrenze. Dies ist die Position zwischen einem Wortzeichen (\w) und einem Nicht-Wortzeichen (\W) oder dem Anfang oder Ende der Zeichenkette. Zum Beispiel passt \bword\b auf das ganze Wort "word".

Flags:

Regex-Flags modifizieren das Verhalten von regulären Ausdrücken. Sie werden am Ende des Regex-Literals angehängt oder als zweites Argument an den RegExp-Konstruktor übergeben.

• g (global): Findet alle Vorkommen des Musters, nicht nur das erste.
• i (ignore case): Führt einen Abgleich ohne Berücksichtigung der Groß-/Kleinschreibung durch.
• m (multiline): Aktiviert den mehrzeiligen Modus, in dem ^ und $ auf den Anfang und das Ende jeder Zeile (getrennt durch \n) passen.
• s (dotAll): Ermöglicht es dem Punkt (.), auch auf Zeilenumbruchzeichen zu passen.
• u (unicode): Aktiviert die volle Unicode-Unterstützung.
• y (sticky): Passt nur ab dem Index, der durch die Eigenschaft lastIndex der Regex angegeben wird.

JavaScript Regex-Methoden

JavaScript bietet mehrere Methoden für die Arbeit mit regulären Ausdrücken:

• test(): Testet, ob eine Zeichenkette mit dem Muster übereinstimmt. Gibt true oder false zurück.
• exec(): Führt eine Suche nach einer Übereinstimmung in einer Zeichenkette aus. Gibt ein Array mit dem übereinstimmenden Text und den erfassten Gruppen oder null zurück, wenn keine Übereinstimmung gefunden wird.
• match(): Gibt ein Array mit den Ergebnissen des Abgleichs einer Zeichenkette mit einem regulären Ausdruck zurück. Verhält sich mit und ohne das g-Flag unterschiedlich.
• search(): Testet auf eine Übereinstimmung in einer Zeichenkette. Gibt den Index der ersten Übereinstimmung oder -1 zurück, wenn keine Übereinstimmung gefunden wird.
• replace(): Ersetzt Vorkommen eines Musters durch eine Ersatzzeichenkette oder eine Funktion, die die Ersatzzeichenkette zurückgibt.
• split(): Teilt eine Zeichenkette basierend auf einem regulären Ausdruck in ein Array von Teilzeichenketten auf.

Beispiele für die Verwendung von Regex-Methoden:

// test()
const regex = /hello/;
const str = "hello world";
console.log(regex.test(str)); // Ausgabe: true

// exec()
const regex2 = /hello (\w+)/;
const str2 = "hello world";
const result = regex2.exec(str2);
console.log(result); // Ausgabe: ["hello world", "world", index: 0, input: "hello world", groups: undefined]

// match() mit 'g'-Flag
const regex3 = /\d+/g; // Passt global auf eine oder mehrere Ziffern
const str3 = "Es gibt 123 Äpfel und 456 Orangen.";
const matches = str3.match(regex3);
console.log(matches); // Ausgabe: ["123", "456"]

// match() ohne 'g'-Flag
const regex4 = /\d+/;
const str4 = "Es gibt 123 Äpfel und 456 Orangen.";
const match = str4.match(regex4);
console.log(match); // Ausgabe: ["123", index: 9, input: "Es gibt 123 Äpfel und 456 Orangen.", groups: undefined]

// search()
const regex5 = /world/;
const str5 = "hello world";
console.log(str5.search(regex5)); // Ausgabe: 6

// replace()
const regex6 = /world/;
const str6 = "hello world";
const newStr = str6.replace(regex6, "JavaScript");
console.log(newStr); // Ausgabe: hello JavaScript

// replace() mit einer Funktion
const regex7 = /(\d+)-(\d+)-(\d+)/;
const str7 = "Heutiges Datum ist 2023-10-27";
const newStr2 = str7.replace(regex7, (match, year, month, day) => {
  return `${day}/${month}/${year}`;
});
console.log(newStr2); // Ausgabe: Heutiges Datum ist 27/10/2023

// split()
const regex8 = /, /;
const str8 = "Apfel, Banane, Kirsche";
const arr = str8.split(regex8);
console.log(arr); // Ausgabe: ["Apfel", "Banane", "Kirsche"]

Fortgeschrittene Regex-Techniken

Erfassende Gruppen (Capturing Groups):

Klammern () werden verwendet, um erfassende Gruppen in regulären Ausdrücken zu erstellen. Erfasste Gruppen ermöglichen es Ihnen, bestimmte Teile des übereinstimmenden Textes zu extrahieren. Die Methoden exec() und match() geben ein Array zurück, bei dem das erste Element die gesamte Übereinstimmung ist und die nachfolgenden Elemente die erfassten Gruppen sind.

const regex = /(\d{4})-(\d{2})-(\d{2})/;
const dateString = "2023-10-27";
const match = regex.exec(dateString);

console.log(match[0]); // Ausgabe: 2023-10-27 (Die gesamte Übereinstimmung)
console.log(match[1]); // Ausgabe: 2023 (Die erste erfasste Gruppe - Jahr)
console.log(match[2]); // Ausgabe: 10 (Die zweite erfasste Gruppe - Monat)
console.log(match[3]); // Ausgabe: 27 (Die dritte erfasste Gruppe - Tag)

Benannte erfassende Gruppen (Named Capturing Groups):

ES2018 führte benannte erfassende Gruppen ein, die es Ihnen ermöglichen, erfassenden Gruppen mit der Syntax (?...) Namen zuzuweisen. Dies macht den Code lesbarer und wartbarer.

const regex = /(?\d{4})-(?\d{2})-(?\d{2})/;
const dateString = "2023-10-27";
const match = regex.exec(dateString);

console.log(match.groups.year);  // Ausgabe: 2023
console.log(match.groups.month); // Ausgabe: 10
console.log(match.groups.day);   // Ausgabe: 27

Nicht-erfassende Gruppen (Non-Capturing Groups):

Wenn Sie Teile einer Regex gruppieren müssen, ohne sie zu erfassen (z. B. um einen Quantifizierer auf eine Gruppe anzuwenden), können Sie eine nicht-erfassende Gruppe mit der Syntax (?:...) verwenden. Dies vermeidet unnötige Speicherzuweisung für erfasste Gruppen.

const regex = /(?:https?:\/\/)?([\w\.]+)/; // Passt auf eine URL, erfasst aber nur den Domainnamen
const url = "https://www.example.com/path";
const match = regex.exec(url);

console.log(match[1]); // Ausgabe: www.example.com

Lookarounds:

Lookarounds sind Zusicherungen mit der Länge null, die eine Position in einer Zeichenkette basierend auf einem Muster abgleichen, das dieser Position vorangeht (Lookbehind) oder folgt (Lookahead), ohne das Lookaround-Muster selbst in die Übereinstimmung einzubeziehen.

• Positive Lookahead: (?=...) Passt, wenn das Muster innerhalb des Lookaheads der aktuellen Position *folgt*.
• Negative Lookahead: (?!...) Passt, wenn das Muster innerhalb des Lookaheads der aktuellen Position *nicht* folgt.
• Positive Lookbehind: (?<=...) Passt, wenn das Muster innerhalb des Lookbehinds der aktuellen Position *vorangeht*.
• Negative Lookbehind: (? Passt, wenn das Muster innerhalb des Lookbehinds der aktuellen Position *nicht* vorangeht.

// Positive Lookahead: Preis nur erhalten, wenn USD folgt
const regex = /\d+(?= USD)/;
const text = "Der Preis beträgt 100 USD";
const match = text.match(regex);
console.log(match); // Ausgabe: ["100"]

// Negative Lookahead: Wort nur erhalten, wenn keine Zahl folgt
const regex2 = /\b\w+\b(?! \d)/;
const text2 = "Apfel 123 Banane Orange 456";
const matches = text2.match(regex2);
console.log(matches); // Ausgabe: null, weil match() ohne 'g'-Flag nur die erste Übereinstimmung zurückgibt, was nicht das ist, was wir brauchen.
// um es zu beheben:
const regex3 = /\b\w+\b(?! \d)/g;
const text3 = "Apfel 123 Banane Orange 456";
const matches3 = text3.match(regex3);
console.log(matches3); // Ausgabe: [ 'Banane' ]

// Positive Lookbehind: Wert nur erhalten, wenn $ vorangeht
const regex4 = /(?<=L\$)\d+/;
const text4 = "Der Preis ist $200";
const match4 = text4.match(regex4);
console.log(match4); // Ausgabe: ["200"]

// Negative Lookbehind: Wort nur erhalten, wenn nicht das Wort 'nicht' vorangeht
const regex5 = /(?

const regex = /([a-z]+) \1/;
const text = "hallo hallo welt";
const match = regex.exec(text);
console.log(match); // Ausgabe: ["hallo hallo", "hallo", index: 0, input: "hallo hallo welt", groups: undefined]

const emailRegex = /^[\w-\.]+@([\w-]+\.)+[\w-]{2,4}$/;

console.log(emailRegex.test("test@example.com"));    // Ausgabe: true
console.log(emailRegex.test("invalid-email"));       // Ausgabe: false
console.log(emailRegex.test("test@sub.example.co.uk")); // Ausgabe: true

const urlRegex = /https?:\/\/(www\.)?[-a-zA-Z0-9@:%._\+~#=]{1,256}\.[a-zA-Z0-9()]{1,6}\b([-a-zA-Z0-9()@:%_\+.~#?&//=]*)/g;
const text = "Besuchen Sie unsere Website unter https://www.example.com oder schauen Sie sich http://blog.example.org an.";
const urls = text.match(urlRegex);
console.log(urls); // Ausgabe: ["https://www.example.com", "http://blog.example.org"]

const csvString = 'John,Doe,"123, Main St",New York';
const csvRegex = /(?:"([^"]*(?:""[^"]*)*)")|([^,]+)/g; //Korrigierte CSV-Regex
let values = [];
let match;  

while (match = csvRegex.exec(csvString)) {
  values.push(match[1] ? match[1].replace(/""/g, '"') : match[2]);
}


console.log(values); // Ausgabe: ["John", "Doe", "123, Main St", "New York"]

const phoneRegex = /^\+(?:[0-9] ?){6,14}[0-9]$/;
console.log(phoneRegex.test("+1 555 123 4567")); // Ausgabe: true (US-Beispiel)
console.log(phoneRegex.test("+44 20 7946 0500")); // Ausgabe: true (UK-Beispiel)
console.log(phoneRegex.test("+81 3 3224 5000"));  // Ausgabe: true (Japan-Beispiel)
console.log(phoneRegex.test("123-456-7890"));   // Ausgabe: false

const passwordRegex = /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)[a-zA-Z\d]{8,}$/;

console.log(passwordRegex.test("P@ssword123")); // Ausgabe: true
console.log(passwordRegex.test("password"));       // Ausgabe: false (kein Großbuchstabe oder Zahl)
console.log(passwordRegex.test("Password"));       // Ausgabe: false (keine Zahl)
console.log(passwordRegex.test("Pass123"));        // Ausgabe: false (kein Kleinbuchstabe)
console.log(passwordRegex.test("P@ss1"));          // Ausgabe: false (weniger als 8 Zeichen)