Regular Expressions &

Geschätzte Lektüre: 11 Minuten 449 Ansichten

Regular Expressions (Regex) sind mächtige Werkzeuge zur Mustererkennung in Strings. Sie ermöglichen das Suchen, Ersetzen und Extrahieren von Textteilen basierend auf komplexen Mustern.

Grundlagen von Regex in JavaScript

In JavaScript gibt es zwei Möglichkeiten, ein Regex-Muster zu erstellen:

Regex-Literal (wird kompiliert wenn der Code geladen wird):

const regex = /muster/flags;

Konstruktor-Funktion (wird zur Laufzeit kompiliert):

const regex = new RegExp('muster', 'flags');

Flags (Modifikatoren)

• i : Case-insensitive Suche
• g : Globale Suche (alle Treffer, nicht nur der erste)
• m : Multiline-Modus (^ und $ match Anfang/Ende jeder Zeile)
• s : Dotall-Modus (punkt matcht auch Zeilenumbrüche)
• u : Unicode-Unterstützung
• y : Sticky-Modus (Suche ab exakter Position)

Regex-Syntax mit Beispielen

Einfache Muster

const text = "Hallo Welt!";

// Einfache Übereinstimmung
/hallo/i.test(text); // true (case-insensitive)

// Buchstaben und Zahlen
const alphanumeric = /[a-zA-Z0-9]/;
alphanumeric.test("a"); // true
alphanumeric.test("1"); // true
alphanumeric.test("!"); // false

Spezielle Zeichen

• . – Beliebiges Zeichen (außer Zeilenumbruch)
• ^ – Anfang des Strings (oder Zeile im Multiline-Modus)
• $ – Ende des Strings (oder Zeile im Multiline-Modus)
• \d – Ziffer [0-9]
• \D – Keine Ziffer [^0-9]
• \w – Wortzeichen [a-zA-Z0-9_]
• \W – Kein Wortzeichen [^a-zA-Z0-9_]
• \s – Whitespace-Zeichen
• \S – Kein Whitespace-Zeichen

Beispiele:

// E-Mail-Validierung (einfache Version)
const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
emailRegex.test("test@example.com"); // true
emailRegex.test("ungültig@email"); // false

// Datumsformat (dd-mm-yyyy)
const dateRegex = /^\d{2}-\d{2}-\d{4}$/;
dateRegex.test("31-12-2020"); // true
dateRegex.test("31/12/2020"); // false

Quantoren

• * – 0 oder mehr Vorkommen
• + – 1 oder mehr Vorkommen
• ? – 0 oder 1 Vorkommen
• {n} – Genau n Vorkommen
• {n,} – Mindestens n Vorkommen
• {n,m} – Zwischen n und m Vorkommen

Beispiele:

// Passwortprüfung (mind. 8 Zeichen, mind. 1 Zahl, 1 Großbuchstabe)
const passwordRegex = /^(?=.*\d)(?=.*[A-Z]).{8,}$/;
passwordRegex.test("Passwort1"); // true
passwordRegex.test("passwort"); // false

// Telefonnummer (verschiedene Formate)
const phoneRegex = /^\+?\d{2,3}[- ]?\d{3,4}[- ]?\d{3,4}$/;
phoneRegex.test("+49 123 456789"); // true
phoneRegex.test("0123456789"); // true

Gruppen und Capturing

• ( ) – Erfassungsgruppe
• (?: ) – Nicht-erfassende Gruppe
• | – Oder-Bedingung

Beispiele:

// Farben extrahieren
const colorText = "Farben: rot, grün, blau";
const colorRegex = /(rot|grün|blau)/g;
colorText.match(colorRegex); // ["rot", "grün", "blau"]

// Datum extrahieren mit Capturing-Groups
const dateText = "Datum: 31-12-2020";
const dateRegex = /(\d{2})-(\d{2})-(\d{4})/;
const match = dateRegex.exec(dateText);
// match[1] = "31" (Tag)
// match[2] = "12" (Monat)
// match[3] = "2020" (Jahr)

Lookaheads und Lookbehinds

• (?=…) – Positiver Lookahead
• (?!…) – Negativer Lookahead
• (?<=…) – Positiver Lookbehind
• (?<!…) – Negativer Lookbehind

Beispiele:

// Passwort mit mind. einer Zahl, einem Groß- und Kleinbuchstaben
const strongPasswordRegex = /^(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{8,}$/;

// Zahl mit Tausender-Trennzeichen aber nicht am Anfang/Ende
const numberRegex = /^(?!,)(?:\d{1,3}(?:,\d{3})*)(?<!,)$/;
numberRegex.test("1,234,567"); // true
numberRegex.test(",123,456"); // false

Methoden für Regex in JavaScript

test() – Überprüft auf Übereinstimmung

const regex = /hello/;
regex.test("hello world"); // true

exec() – Sucht nach Übereinstimmung und gibt Details zurück

const regex = /(\w+)\s(\w+)/;
const result = regex.exec("John Doe");
// result[0] = "John Doe" (vollständige Übereinstimmung)
// result[1] = "John"
// result[2] = "Doe"

match() – String-Methode, sucht nach Übereinstimmungen

"Hello World".match(/hello/i); // ["Hello"]
"a1b2c3".match(/\d/g); // ["1", "2", "3"]

replace() – Ersetzt Übereinstimmungen

"Hello World".replace(/world/i, "JavaScript"); // "Hello JavaScript"
"123-456-789".replace(/\D/g, ""); // "123456789"

search() – Gibt Position der Übereinstimmung zurück

"JavaScript".search(/Script/); // 4

split() – Teilt String an Übereinstimmungen

"a,b,c,d".split(/,/); // ["a", "b", "c", "d"]

Praktische Anwendungsbeispiele

HTML-Tags entfernen:

const html = "<p>Hello <b>World</b></p>";
const cleanText = html.replace(/<[^>]*>/g, "");
// "Hello World"

CamelCase zu kebab-case konvertieren:

function camelToKebab(str) {
  return str.replace(/([a-z])([A-Z])/g, '$1-$2').toLowerCase();
}
camelToKebab("backgroundColor"); // "background-color"

Query-Parameter aus URL extrahieren:

function getQueryParams(url) {
  const params = {};
  url.replace(/([^?=&]+)(=([^&]*))?/g, 
    (match, key, _, value) => params[key] = value
  );
  return params;
}
getQueryParams("?name=John&age=30"); // {name: "John", age: "30"}

Validierung einer Kreditkartennummer (vereinfacht):

function isValidCreditCard(number) {
  // Entferne alle Nicht-Ziffern
  const cleanNumber = number.replace(/\D/g, '');
  
  // 13-16 Ziffern, beginnend mit 4, 5 oder 6
  return /^[456]\d{12,15}$/.test(cleanNumber);
}

Tipps und Best Practices

• Komplexe Regex kommentieren:
• Performance beachten: Kompilierte Regex-Objekte wiederverwenden.
• Für Lesbarkeit: Bei komplexen Mustern besser in kleinere Teile zerlegen.
• Nicht für alles verwenden: Manchmal sind String-Methoden wie includes(), startsWith() besser geeignet

// -- Mit Template Strings und RegExp-Konstruktor
const regex = new RegExp(
  `^           # Anfang des Strings
  (\\d{3})     # 3 Ziffern (Area Code)
  [ -]?       # Optionaler Trenner (Leerzeichen oder Bindestrich)
  (\\d{3})     # 3 Ziffern
  [ -]?       # Optionaler Trenner
  (\\d{4})     # 4 Ziffern
  $           # Ende des Strings
  `.replace(/#.*$/gm, '').replace(/\s+/g, '')
);

// Oder ohne Kommentare, aber mit Zeilenaufteilung zur besseren Lesbarkeit
const regex2 = new RegExp(
  '^' +
  '(\\d{3})' +   // Area Code - 3 Ziffern (Area Code)
  '[ -]?' +      // Optionaler Trenner (Leerzeichen oder Bindestrich)
  '(\\d{3})' +   // 3 Ziffern - Next 3 digits
  '[ -]?' +      // Optionaler Trenner - Optional separator
  '(\\d{4})' +   // Ende des Strings - Last 4 digits
  '$'
);

//---- Mit Variablen und Konkatenation
const start = '^';
const areaCode = '(\\d{3})';
const separator = '[ -]?';
const threeDigits = '(\\d{3})';
const fourDigits = '(\\d{4})';
const end = '$';

const phoneRegex = new RegExp(
  start + areaCode + separator + threeDigits + separator + fourDigits + end
);

//--- Mit einem Builder-Pattern (erweitert)

class RegexBuilder {
  constructor() {
    this.parts = [];
    this.flags = '';
  }

  start() { this.parts.push('^'); return this; }
  end() { this.parts.push('$'); return this; }
  digits(n) { this.parts.push(`\\d{${n}}`); return this; }
  optionalSeparator() { this.parts.push('[ -]?'); return this; }
  build() { return new RegExp(this.parts.join(''), this.flags); }
}

// Verwendung:
const phoneRegex = new RegexBuilder()
  .start()
  .digits(3)
  .optionalSeparator()
  .digits(3)
  .optionalSeparator()
  .digits(4)
  .end()
  .build();
  
//---- Einfach mit Leerzeichen (für einfache Lesbarkeit)
// Ohne Kommentare, aber mit visueller Trennung
const regex = /^(\d{3}) [ -]? (\d{3}) [ -]? (\d{4})$/;

Starkes Werkzeug,

Regex ist ein starkes Werkzeug, das bei korrekter Anwendung viel Zeit sparen kann, aber bei falscher Verwendung auch zu unerwarteten Ergebnissen führen kann. Es lohnt sich, Zeit in das Verständnis der Syntax zu investieren!

Dieses Dokument teilen

Regular Expressions &

Oder Link kopieren

INHALT

Abonnieren

×
Cancel