Logo Wand.Tools

Reguläre Ausdrücke Generator

Intelligente Generierung und Erklärung von regulären Ausdrücken, unterstützt verschiedene gängige Mustervergleiche

JavaScript Reguläre Ausdrücke Tutorial

  # JavaScript Reguläre Ausdrücke Tutorial (Komplette Syntax + Häufige Beispiele)
  
  > Dieser Artikel ist ein umfassendes Tutorial für JavaScript Reguläre Ausdrücke (RegExp), vom Anfänger bis zum Fortgeschrittenen. Er beinhaltet Syntaxregeln, gängige Metazeichen, Flags, Assertions, Gruppierungen, gieriges vs. faules Matching und ist für Frontend-Entwicklung, Web-Scraping, Formularvalidierung und andere Szenarien anwendbar. Er ist für Anfänger und fortgeschrittene Benutzer zum Lernen und Nachschlagen geeignet.
  
  ## Grundlegende Regex-Syntax
  
  ### Zwei Arten, einen Regulären Ausdruck zu erstellen
  
  ```js
  const regex1 = /abc/;             // Literal-Schreibweise
  const regex2 = new RegExp('abc'); // Konstruktor-Schreibweise

Gängige Flags

Flag Beschreibung
g Globales Matching
i Case-insensitives Matching
m Mehrzeiliges Matching
s Erlaubt . das Matching von Zeilenumbrüchen (ES2018)
u Unterstützt Unicode (ES6)
y Sticky Matching (ES6)

Beispiel:

const re = /hello/gi;
const str = 'Hello hello';
console.log(str.match(re)); // ["Hello", "hello"]

Metazeichen und Zeichenklassen

Gängige Metazeichen

Zeichen Bedeutung
. Passt auf jedes Zeichen (außer Zeilenumbruch)
\d Passt auf eine Ziffer [0-9]
\D Passt auf ein Nicht-Ziffer-Zeichen
\w Passt auf ein Wortzeichen (alphanumerisch + Unterstrich)
\W Passt auf ein Nicht-Wortzeichen
\s Passt auf ein Leerraumzeichen
\S Passt auf ein Nicht-Leerraumzeichen
\b Passt auf eine Wortgrenze
\B Passt auf eine Nicht-Wortgrenze
\\ Passt auf einen Backslash

Zeichenklassen und Bereiche

/[abc]/     // Passt auf 'a' oder 'b' oder 'c'
/[a-z]/     // Passt auf Kleinbuchstaben
/[A-Z]/     // Passt auf Großbuchstaben
/[0-9]/     // Passt auf Ziffern
/[^abc]/    // Passt auf jedes Zeichen außer a, b oder c

Quantifizierer (Wiederholung)

Quantifizierer Bedeutung
* Passt auf das vorherige Element 0 oder mehr Mal
+ Passt auf das vorherige Element 1 oder mehr Mal
? Passt auf das vorherige Element 0 oder 1 Mal
{n} Passt genau n Mal
{n,} Passt mindestens n Mal
{n,m} Passt mindestens n Mal, höchstens m Mal

Beispiel:

/\d{4}/.test("2025");       // true
/ab{2,4}c/.test("abbbc");   // true

Gruppierung und Erfassung

/(abc)/         // Erfassende Gruppe
/(abc){2}/      // Erfassende Gruppe wiederholt
/(?:abc)/       // Nicht-erfassende Gruppe
/(a)(b)(c)/     // Mehrere erfassende Gruppen

Ergebnisse extrahieren:

const match = /(hello) (\w+)/.exec("hello world");
console.log(match[1]); // hello
console.log(match[2]); // world

Assertions (Nullbreiten-Assertions)

Positive Lookahead

/\d+(?=px)/     // Passt auf Ziffern, denen px folgt

Negative Lookahead

/\d+(?!px)/     // Passt auf Ziffern, denen nicht px folgt

Lookbehind (ES2018+)

/(?<=\$)\d+/    // Passt auf Ziffern, denen $ vorangeht
/(?<!$)\d+/    // Passt auf Ziffern, denen nicht $ vorangeht

Gieriges vs. Faules Matching

Ausdruck Matching-Verhalten
.* Gierig (so viel wie möglich)
.*? Faul (so wenig wie möglich)

Beispiel:

const str = '<p>text</p><p>more</p>';
const greedy = /<p>.*<\/p>/;
const lazy = /<p>.*?<\/p>/g;

console.log(str.match(greedy)); // ['<p>text</p><p>more</p>']
console.log(str.match(lazy));   // ['<p>text</p>', '<p>more</p>']

Beispiele für gängige Anwendungsfälle

E-Mail-Validierung

/^[\w.-]+@[a-zA-Z\d.-]+\.[a-zA-Z]{2,}$/.test("[email protected]");

Mobilnummer-Validierung (Festlandchina)

/^1[3-9]\d{9}$/.test("13888888888");

Alle Leerzeichen entfernen

const cleaned = str.replace(/\s+/g, '');

Domain aus URL extrahieren

const domain = url.match(/https?:\/\/([^\/]+)/)[1];

Regex-Methoden-Zusammenfassung

Methode Beschreibung
test(str) Prüft, ob der String passt
exec(str) Gibt das Match-Ergebnisobjekt zurück (mit Gruppen)
str.match(re) Gibt alle Matches zurück (mit global Flag)
str.replace() Ersetzt passende Inhalte
str.split(re) Teilt den String mit Regex
str.search(re) Gibt den Index des ersten Matches zurück

Fazit

Dieses Tutorial bietet einen systematischen Überblick über die Syntax und praktische Anwendungsbeispiele von JavaScript Regulären Ausdrücken. Es ist geeignet für Frontend-Entwicklung, Backend-Entwicklung, Textverarbeitung und verschiedene andere Anwendungsfälle. Das Beherrschen von Regulären Ausdrücken kann die Effizienz der String-Verarbeitung erheblich verbessern.