EMZETT.
Login

Emzett Wiki

JavaScript: Reguläre Ausdrücke

Properties1
tagsprogrammiersprachen, javascript

3 Min. Lesezeit

Kurz: Reguläre Ausdrücke (RegExp, kurz Regex) beschreiben Textmuster. Du schreibst sie zwischen Schrägstrichen: /muster/flags.

Teil des Kurses JavaScript

Kapitel 20 von 40 im Kurs JavaScript. Mit Fortschritt, Quiz und Zertifikat auf der Lernseite.

Reguläre Ausdrücke (RegExp, kurz Regex) beschreiben Textmuster. Du schreibst sie zwischen Schrägstrichen: /muster/flags.

Erste Schritte

const text = "Meine Nummer ist 12345, deine 67890.";
console.log(/\d+/.test(text));            // gibt es Ziffern?
console.log(text.match(/\d+/)[0]);        // erster Treffer
console.log(text.match(/\d+/g));          // alle Treffer (Flag g)
console.log(text.replace(/\d/g, "#"));

Ausgabe:

true
12345
[ '12345', '67890' ]
Meine Nummer ist #####, deine #####.

Bausteine

MusterBedeutung
.beliebiges Zeichen außer Zeilenumbruch
\d \DZiffer / keine Ziffer
\w \WWortzeichen [A-Za-z0-9_] / anderes
\s \SLeerraum / kein Leerraum
^ $Anfang / Ende
\bWortgrenze
[abc] [a-z] [^0-9]Zeichenklasse
a|ba oder b
( )Gruppe
* + ?0 oder mehr, 1 oder mehr, 0 oder 1
{3} {2,4}genau 3 / 2 bis 4

Flags

FlagWirkung
galle Treffer (global)
iGroß-/Kleinschreibung ignorieren
m^ und $ pro Zeile
s. passt auch auf Zeilenumbrüche
uUnicode-Unterstützung
console.log("Python python PYTHON".match(/python/gi));
console.log("eins\nzwei".match(/^\w+/gm));
console.log(/^\d{5}$/.test("50667"), /^\d{5}$/.test("5066"));
console.log(/colou?r/.test("color"), /colou?r/.test("colour"));

Ausgabe:

[ 'Python', 'python', 'PYTHON' ]
[ 'eins', 'zwei' ]
true false
true true

Gruppen

const m = "Geburtstag: 24.12.1999".match(/(\d{2})\.(\d{2})\.(\d{4})/);
console.log(m[0], m[1], m[2], m[3]);
 
const benannt = "am 05.11.".match(/(?<tag>\d{2})\.(?<monat>\d{2})/);
console.log(benannt.groups.tag, benannt.groups.monat);
 
console.log("2025-03-08".replace(/(\d+)-(\d+)-(\d+)/, "$3.$2.$1"));
console.log("mia@beispiel.de".replace(/(?<name>\w+)@(?<host>\w+)\.de/, "$<name> bei $<host>"));

Ausgabe:

24.12.1999 24 12 1999
05 11
08.03.2025
mia bei beispiel

Alle Treffer durchlaufen

const text = "a1 b22 c333";
for (const t of text.matchAll(/([a-z])(\d+)/g)) {
  console.log(t[1], t[2], t.index);
}
console.log([..."x=1, y=2".matchAll(/(\w)=(\d)/g)].map(t => [t[1], t[2]]));

Ausgabe:

a 1 0
b 22 3
c 333 7
[ [ 'x', '1' ], [ 'y', '2' ] ]

Methoden im Überblick

MethodeWirkung
regex.test(text)true/false
text.match(regex)Treffer oder null
text.matchAll(regex)Iterator über alle Treffer (braucht g)
text.replace(regex, ersatz)ersetzen (mit g alle)
text.split(regex)an Treffern aufteilen
regex.exec(text)Treffer mit Position (zustandsbehaftet bei g)
console.log("a, b;c,   d".split(/[,;]\s*/));
console.log("Hallo Welt".replace(/\w+/g, w => w[0].toUpperCase() + w.slice(1).toLowerCase()));
console.log("preis: 5€, 10€".replace(/(\d+)€/g, (_, z) => `${z * 2}€`));

Ausgabe:

[ 'a', 'b', 'c', 'd' ]
Hallo Welt
preis: 10€, 20€

Gierig oder sparsam

const html = "<b>fett</b> und <i>kursiv</i>";
console.log(html.match(/<.+>/)[0]);
console.log(html.match(/<.+?>/g));

Ausgabe:

<b>fett</b> und <i>kursiv</i>
[ '<b>', '</b>', '<i>', '</i>' ]

Ein ? hinter dem Quantor macht ihn sparsam (so wenig wie möglich).

Lookahead

console.log("passwort1".match(/^(?=.*\d)(?=.*[a-z]).{8,}$/) !== null);
console.log("preis 100 euro".match(/\d+(?= euro)/)[0]);
console.log("12px 5em".match(/\d+(?=px)/g));

Ausgabe:

true
100
[ '12' ]

Achtung

Prüfe E-Mail-Adressen nicht mit komplizierten Regex. Ein einfacher Test (/^\S+@\S+\.\S+$/) reicht fürs Formular; ob die Adresse existiert, zeigt nur eine Bestätigungsmail.

Merke

  • Regex: /muster/flags; g alle, i ohne Groß/Klein, m mehrzeilig
  • test, match, matchAll, replace, split sind die Hauptwerkzeuge
  • Gruppen ( ) und benannte Gruppen (?<name> ) holen Teile heraus
  • ? nach Quantor macht ihn sparsam
  • Sonderzeichen mit \ maskieren, Muster lesbar halten

Übungsaufgabe

Schreibe einen Ausdruck, der alle Hashtags (#wort) aus einem Text zieht, und einen, der prüft, ob ein Text eine Uhrzeit im Format HH:MM ist.

Quiz zur Selbstkontrolle

Weiter im Kurs

Zurück: Datum und Zeit

Weiter: Klassen und Objekte

Alle Kapitel: JavaScript im Überblick

Graphansicht

Backlinks