Reguläre Ausdrücke: Gruppen und Ersetzen

Kurz gesagt: Gruppen in einem regulären Ausdruck, Teile in Klammern, holen Stücke aus jedem Treffer; in JavaScript findest du sie mit matchAll und verwendest sie beim Ersetzen mit $1.

Problem

Der Kontoauszug

Deine Bank schickt dir einen Text mit den Zahlungen des Monats. Du willst jeden Betrag einzeln, um sie zusammenzuzählen:

const statement = "Miete 450,00 € am 01.10, Strom 87,35 € am 05.10, Wasser 23,10 € am 12.10";
console.log(/\d+,\d{2} €/.test(statement));

Ausgabe

true

test sagt nur „ja, irgendwo steht ein Betrag“. replace würde die Beträge ändern, aber es gibt sie dir nicht. Du brauchst einen Weg, jeden Treffer zu finden und ihn zu nehmen.

Die Idee

matchAll

Zum Suchen hat ein String die Methode matchAll:

const statement = "Miete 450,00 € am 01.10, Strom 87,35 € am 05.10, Wasser 23,10 € am 12.10";
const amount = /\d+,\d{2} €/g;
for (const m of statement.matchAll(amount)) {
  console.log(m[0]);
}

Ausgabe

450,00 €
87,35 €
23,10 €

• Das Muster hat das Flag g: „alle Treffer“. Ohne es bricht matchAll mit einem TypeError ab.
• statement.matchAll(amount) liefert die Treffer einen nach dem anderen, von links nach rechts. Deshalb steht es in einem for…of: Jeder Durchlauf bekommt den nächsten, bis keine mehr da sind.
• m ist ein gefundener Treffer: ein Array, in dem m[0] sein Text ist.

Genauer, für Neugierige

• match mit dem Flag g liefert dir direkt ein Array mit den Texten der Treffer. Ohne g liefert es nur den ersten Treffer, mit seinen Gruppen (null, wenn es keinen gibt).

const statement = "Miete 450,00 € am 01.10, Strom 87,35 € am 05.10, Wasser 23,10 € am 12.10";
console.log(statement.match(/\d+,\d{2} €/g));
console.log(statement.match(/\d+,\d{2} €/)[0]);

Ausgabe

[ '450,00 €', '87,35 €', '23,10 €' ]
450,00 €

Sieh es dir an

Wo der Treffer steht

Außer dem Text weiß der Treffer auch, wo er gefunden wurde:

const log = "ERROR Festplatte; INFO Start; ERROR Netzwerk";
let count = 0;
for (const m of log.matchAll(/ERROR/g)) {
  count++;
  console.log(`${m[0]} von ${m.index} bis ${m.index + m[0].length}`);
}
console.log(`Gesamt: ${count}`);

Ausgabe

ERROR von 0 bis 5
ERROR von 30 bis 35
Gesamt: 2

m.index ist der Index des ersten Zeichens des Treffers. Das Ende ist m.index + m[0].length: der Index nach dem letzten, wie bei slice. Deshalb ist log.slice(m.index, m.index + m[0].length) dasselbe wie m[0].

Probier es aus

Eine Ziffer oder eine Zahl?

Was gibt das Programm aus?

let result = "";
for (const m of "Tisch 12, 4 Personen, 2 Flaschen".matchAll(/\d+/g)) {
  result += `[${m[0]}]`;
}
console.log(result);

Antwort

[12][4][2]

[1][2][4][2]

[1242]

Prüfen

Die Idee

Gruppen: Teile des Treffers

Klammern im Muster bilden eine Gruppe. Der Treffer merkt sich für jede Gruppe einzeln, was auf sie gepasst hat:

const date = /(\d{2})\.(\d{2})\.(\d{4})/;
const m = "Fällig: 15.11.2026".match(date);
if (m) {
  console.log(m[0]);
  console.log(m[1] + " / " + m[2] + " / " + m[3]);
  console.log(m[3] + "-" + m[2] + "-" + m[1]);
}

Ausgabe

15.11.2026
15 / 11 / 2026
2026-11-15

• Die Gruppen werden nach ihren öffnenden Klammern nummeriert, von links nach rechts, ab 1.

• m[1] ist Gruppe 1. m[0] ist der ganze Treffer.
• match ohne das Flag g ist für den Fall, dass du nur den ersten Treffer brauchst. Gibt es keinen, ist m gleich null, und if (m) überspringt ihn.

So nimmst du aus einem Datum Tag, Monat und Jahr einzeln heraus und ordnest sie so an, wie du sie brauchst.

const date = /(\d{2})\.(\d{2})\.(\d{4})/;
const m = "Fällig: 15.11.2026".match(date);
if (m) {
  console.log(m[0]);
  console.log(m[1] + " / " + m[2] + " / " + m[3]);
  console.log(m[3] + "-" + m[2] + "-" + m[1]);
}

Schritt für Schritt, in Worten

1. Das Datumsmuster hat drei Klammerpaare: drei Gruppen.
2. match ohne das Flag g sucht den ersten Treffer. m ist ein Array mit ihm und den Gruppen, oder null.
3. match findet das Datum: von Index 8 bis 18.
4. Jede Gruppe merkt sich ihren Teil: Gruppe 1 ist 15, Gruppe 2 ist 11, Gruppe 3 ist 2026.
5. Die Teile liegen im Array m, jeder unter seinem Index. m[0] ist der ganze Treffer.
6. m[0] ist der ganze Treffer: 15.11.2026.
7. Die drei Gruppen, eine nach der anderen.
8. In umgekehrter Reihenfolge ergeben die Teile 2026-11-15.

Genauer, für Neugierige

• (?:...) ist eine Gruppe, die die Teile nur zusammenhält, ohne sie sich zu merken. Zum Beispiel bildet (?:\+359|0)8[789]\d{7} keine Gruppe 1.

• m.length - 1 ist die Anzahl der Gruppen: Das Array hat den ganzen Treffer und einen Platz für jede Gruppe.
• Wenn eine Gruppe am Treffer nicht beteiligt war (zum Beispiel, weil (,\d{2})? fehlte), ist ihr Platz undefined.

const m = "Trinkgeld 5 €".match(/(\d+)(,\d{2})? €/);
console.log(m.length - 1);
console.log(m[1], m[2]);

Ausgabe

2
5 undefined

Die Idee

Benannte Gruppen und Ersetzen

Wenn es viele Gruppen gibt, verwechselt man die Nummern. Du kannst ihnen Namen geben: (?<name>...), und dann m.groups.name. Hier ist eine Zeile von einer Café-Rechnung:

const item = /(?<qty>\d+) x (?<name>[A-Za-z ]+) zu (?<price>\d+\.\d{2})/g;
for (const m of "2 x Kaffee mit Milch zu 3.20; 1 x Croissant zu 2.90".matchAll(item)) {
  const qty = Number(m.groups.qty);
  const price = Number(m.groups.price);
  console.log(`${m.groups.name}: ${qty * price} €`);
}

Ausgabe

Kaffee mit Milch: 6.4 €
Croissant: 2.9 €

Gruppen funktionieren auch in replace: Im Ersetzungstext ist $1 die Gruppe 1, und $<name> ist die Gruppe mit diesem Namen. Hier die Daten von der deutschen Form in die ISO-Form und in die amerikanische:

const text = "Frist: 15.11.2026, Erinnerung: 08.11.2026";
console.log(text.replace(/(\d{2})\.(\d{2})\.(\d{4})/g, "$3-$2-$1"));
console.log(text.replace(/(?<d>\d{2})\.(?<m>\d{2})\.(?<y>\d{4})/g, "$<m>/$<d>/$<y>"));

Ausgabe

Frist: 2026-11-15, Erinnerung: 2026-11-08
Frist: 11/15/2026, Erinnerung: 11/08/2026

Hier brauchst du matchAll nicht: replace versteht Gruppen von selbst.

Genauer, für Neugierige

• $ ist im Ersetzungstext ein Sonderzeichen. Ein echtes Dollarzeichen ist $$:

console.log("Preis: 5".replace(/(\d+)/, "$$$1"));

Ausgabe

Preis: $5

• Du kannst eine Gruppe auch im Muster selbst verwenden: \1 heißt „dasselbe wie Gruppe 1“. So fängst du wiederholte Wörter. Sieh dir die Karte zu den Flags an.

Probier es aus

Wie viel nimmt +?

Du willst alle HTML-Tags aus der Zeile:

Was gibt das Programm aus?

const html = "<b>Preis:</b> <i>12 €</i>";
for (const m of html.matchAll(/<.+>/g)) {
  console.log(m[0]);
}

Antwort

<b>

<b>
</b>
<i>
</i>

<b>Preis:</b> <i>12 €</i>

Prüfen

Die Idee

Gierig und genügsam

Ein ? nach einem Quantifizierer macht ihn genügsam: Er nimmt so wenig, wie er kann, und hält bei der ersten Gelegenheit an.

const html = "<b>Preis:</b> <i>12 €</i>";
for (const m of html.matchAll(/<.+?>/g)) {
  console.log(m[0]);
}
console.log(html.replace(/<[^>]+>/g, ""));

Ausgabe

<b>
</b>
<i>
</i>
Preis: 12 €

• <.+?> heißt „<, mindestens ein Zeichen und das erste > danach“.
• <[^>]+> macht dasselbe auf andere Weise: „<, Zeichen, die nicht > sind, und >“. Es kann kein > überspringen, deshalb ist es auch schneller. Damit entfernst du die Tags, und nur der Text bleibt übrig.

Gierig	Genügsam
*	*?
+	+?
?	??
{2,5}	{2,5}?

Probier es aus

Finde den Fehler

Das Programm soll die drei Bestellnummern ausgeben, gibt aber nur #1042 aus. In welcher Zeile ist der Fehler?

Wähle die Zeile mit dem Fehler.

1const order = /#\d+/;2const found = "Die Bestellungen #1042, #1043 und #1050 sind versandt.".match(order);3for (const number of found) {4 console.log(number);5}

Prüfen

Die Idee

Flags und Zeilen

Flags sind Buchstaben nach dem Muster. Aus einer Logdatei mit mehreren Zeilen holst du die Fehlermeldungen, egal ob groß oder klein geschrieben:

const log = "INFO: Start\nERROR: Keine Verbindung zur Datenbank\nINFO: Neuer Versuch\nerror: Festplatte 95%";
const p = /^error: (.+)$/gim;
for (const m of log.matchAll(p)) {
  console.log(m[1]);
}

Ausgabe

Keine Verbindung zur Datenbank
Festplatte 95%

• i: Groß- und Kleinbuchstaben gelten als gleich.
• m (multiline) macht ^ und $ zum Anfang und Ende jeder Zeile. Ohne es sind sie nur Anfang und Ende des ganzen Textes, und das Muster findet nichts.
• s lässt . auch einen Zeilenumbruch fangen.
• g kennst du schon: Ohne es funktioniert matchAll nicht.

Genauer, für Neugierige

Zwei Dinge, denen du in fremden Mustern begegnen wirst:

• Eine Rückreferenz (backreference) \1: „derselbe Text wie Gruppe 1“. So fängst du wiederholte Wörter.
• Ein Lookahead (?=...): „irgendwo ab hier kommt ...“, ohne Zeichen zu verbrauchen. Mehrere davon hintereinander sind praktisch für Passwörter: „hat eine Ziffer“ und „hat einen Großbuchstaben“, und mindestens 8 Zeichen.

const twice = /(?<!\p{L})(\p{L}+) \1(?!\p{L})/gu;
for (const m of "Die Zahlung für für März ist eingegangen, bitte bitte prüfe sie.".matchAll(twice)) {
  console.log("Wiederholt: " + m[1]);
}
const strong = /^(?=.*\d)(?=.*[A-Z]).{8,}$/;
console.log(strong.test("geheim12"), strong.test("Geheim12"));

Ausgabe

Wiederholt: für
Wiederholt: bitte
false true

(?!...) ist das Gegenteil: „ab hier kommt kein ...“. Es gibt auch Lookbehind: (?<=...) und (?<!...). Mit ihnen entsteht oben auch die Wortgrenze für Wörter mit Umlauten wie „für“: \b kennt in JavaScript nur lateinische Buchstaben ohne Umlaute und Akzente.

Übung

Finden, herausholen, ersetzen

Löse die Aufgaben in deinem Editor. Der Text ist eine Zeile von der Tastatur. In der Lektion „Dateien“ machst du sie auch mit einer Datei.

1. Suchen und ersetzen. Ersetze das Wort „alt“ überall, wo es ein ganzes Wort ist, durch „neu“, und sag, wie viele Ersetzungen du gemacht hast. Teile anderer Wörter („altmodisch“) bleiben unverändert.

Eingabe

Das Gerät ist alt. Auch das Sofa ist alt, aber nicht altmodisch.

Ausgabe

Das Gerät ist neu. Auch das Sofa ist neu, aber nicht altmodisch.
Ersetzt: 2

2. Wörter mit einem Präfix. In der ersten Zeile steht das Präfix, in der zweiten der Text. Gib jedes Wort aus, das mit dem Präfix beginnt. Das Muster wird aus Text zusammengesetzt, deshalb ist es new RegExp(...).

Eingabe

auf
aufräumen aufstehen Laufband ablaufen aufgeben

Ausgabe

aufräumen
aufstehen
aufgeben

3. Adressen im Text. Hol alle Webadressen heraus, die mit http:// oder https:// beginnen. Der Punkt am Satzende gehört nicht zur Adresse.

Eingabe

Siehe die Seite https://www.example.com und diese: http://www.test.com. Die Dokumente liegen unter https://docs.example.com/guide/start.

Ausgabe

https://www.example.com
http://www.test.com
https://docs.example.com/guide/start

4. Daten nach ISO. Mach aus jedem Datum tt.mm.jjjj im Text die Form jjjj-mm-tt, mit einem einzigen replace.

Eingabe

Vertrag vom 03.10.2026, Zahlung bis 15.10.2026.

Ausgabe

Vertrag vom 2026-10-03, Zahlung bis 2026-10-15.

Weitere Aufgaben

• Summe des Kontoauszugs. Nimm die Beträge aus der ersten Karte mit einer Gruppe für die Euro und einer Gruppe für die Cent, zähl sie zusammen und gib „Summe: 560,45 €“ aus.
• Hashtags. Hol alle Wörter, die mit # beginnen, aus einem Beitrag, in dem Wörter mit und ohne Umlaute (ä, ö, ü, ß) gemischt sind. Überleg, warum du \p{L} und das Flag u brauchst.
• Ohne Tags. Entferne die HTML-Tags aus <p>Die Frist ist der <b>15.11</b>.</p> und gib den reinen Text aus.
• Telefonnummern im Text. Finde alle Handynummern in einem Text und gib sie in der Form +359 88 812 3456 aus, mit Gruppen und replace.

Test

Teste dich

1. Was liefert text.matchAll(/…/g)?

Den Text des ersten Trefferstrue oder false für den ganzen TextJeden Treffer der Reihe nach, als Array mit dem Text und den Gruppen, für for…of

2. Das Muster ist /(\d{2})\.(\d{2})\.(\d{4})/, der Text ist 15.11.2026. Was ist m[2]?

11202615

3. Was ergibt "05.03.2026".replace(/(\d+)\.(\d+)\.(\d+)/, "$2/$1")?

05/0303/05.202603/05

4. Warum fängt "<.+>" den ganzen Text "<b>Preis</b>" und nicht nur "<b>"?

Weil + gierig ist: Es nimmt so viel, wie es kann, und gibt nur so viel zurück, wie es mussWeil . nicht auf > passtWeil find von hinten sucht

5. Was macht das Flag m?

Es lässt . auch einen Zeilenumbruch fangen^ und $ werden zum Anfang und Ende jeder Zeile, nicht nur des ganzen TextesEs durchsucht mehrere Texte auf einmal

Prüfen

Lektion von vorn beginnen

Verwandte Lektionen

• Baut auf: Instanzmethoden · static: was alle Objekte teilen · Strings · Reguläre Ausdrücke
• Aufgaben zum Thema: Text und Dateien