JavaScript Regular Expressions and RegExp Object

Hallo zusammen, angehende Programmierer! Heute machen wir uns auf eine aufregende Reise in die Welt der regulären Ausdrücke (RegEx) in JavaScript. Keine Sorge, wenn ihr vorher noch nichts von RegEx gehört habt – wir beginnen mit den Grundlagen und arbeiten uns hoch. Am Ende dieses Tutorials werdet ihr die Macht der RegEx wie ein Profi einsetzen können!

Was sind Regular Expressions?

Reguläre Ausdrücke, oft abgekürzt als RegEx, sind leistungsstarke Werkzeuge für das Mustererkennung und die Manipulation von Zeichenketten. Denkt daran als eine spezielle Sprache zur Beschreibung von Textmustern. Sie sind wie ein Schweizer Army-Messer für die Arbeit mit Zeichenketten – vielseitig und unglaublich nützlich!

Lassen wir mit einem einfachen Beispiel beginnen:

let muster = /hello/;
let text = "Hello, world!";
console.log(muster.test(text));  // Ausgabe: false

In diesem Beispiel ist /hello/ unser RegEx-Muster, und wir testen, ob es auf den Text "Hello, world!" passt. Das Ergebnis ist false, weil RegEx standardmäßig case-sensitive ist.

RegExp Object

In JavaScript können wir RegEx-Muster mit dem RegExp-Objekt erstellen. So geht's:

let muster1 = new RegExp("hello");
let muster2 = /hello/;

console.log(muster1.test("hello world"));  // Ausgabe: true
console.log(muster2.test("hello world"));  // Ausgabe: true

Beide Methoden zur Erstellung eines RegExp-Objekts sind äquivalent. Die Literalnotation (/pattern/) wird aufgrund ihrer Einfachheit häufiger verwendet.

Modifikatoren

Modifikatoren ermöglichen es uns, das Verhalten eines RegEx-Musters zu ändern. Sehen wir uns einige häufige Modifikatoren an:

Modifikator	Beschreibung
i	Case-insensitive Matching
g	Globale Übereinstimmung (finde alle Übereinstimmungen, nicht nur die erste)
m	Multiline Matching

Hier ist ein Beispiel mit dem 'i' Modifikator:

let muster = /hello/i;
let text = "Hello, World!";
console.log(muster.test(text));  // Ausgabe: true

Jetzt paßt unser Muster "Hello" unabhängig von Groß- und Kleinschreibung!

Klammern

Klammern in RegEx werden verwendet, um eine Menge oder einen Bereich von Zeichen zu definieren, die übereinstimmen sollen:

Klammer	Beschreibung
[abc]	Passt auf jedes Zeichen in den Klammern
[^abc]	Passt auf jedes Zeichen außer den Klammern
[0-9]	Passt auf jede Ziffer von 0 bis 9
[a-z]	Passt auf jedes Kleinbuchstaben

Sehen wir uns ein Beispiel an:

let muster = /[aeiou]/;
console.log(muster.test("hello"));  // Ausgabe: true
console.log(muster.test("why"));    // Ausgabe: false

Dieses Muster paßt auf jeden Vokal. Es findet eine Übereinstimmung in "hello", aber nicht in "why".

Quantoren

Quantoren geben an, wie viele Vorkommen eines Zeichens, einer Gruppe oder einer Zeichenklasse vorhanden sein müssen, damit eine Übereinstimmung gefunden wird.

Quantor	Beschreibung
*	0 oder mehr Vorkommen
+	1 oder mehr Vorkommen
?	0 oder 1 Vorkommen
{n}	Genau n Vorkommen
{n,}	n oder mehr Vorkommen
{n,m}	Zwischen n und m Vorkommen

Hier ist ein spaßiges Beispiel:

let muster = /ba+/;
console.log(muster.test("b"));      // Ausgabe: false
console.log(muster.test("ba"));     // Ausgabe: true
console.log(muster.test("baaaa"));  // Ausgabe: true

Dieses Muster paßt auf "ba" gefolgt von einer beliebigen Anzahl zusätzlicher "a"s. Es ist wie das Blöken einer Schafherde: "baaaa"!

Literal Zeichen

Literal Zeichen in RegEx sind genau das – sie paßt auf sich selbst. Zum Beispiel paßt /hello/ auf die genaue Zeichenfolge "hello".

let muster = /hello world/;
console.log(muster.test("hello world"));  // Ausgabe: true
console.log(muster.test("hello earth"));  // Ausgabe: false

Metazeichen

Metazeichen haben besondere Bedeutungen in RegEx:

Metazeichen	Beschreibung
.	Passt auf jedes einzelne Zeichen
\d	Passt auf jede Ziffer
\D	Passt auf jedes Nicht-Zeichen
\w	Passt auf jedes Wortzeichen
\W	Passt auf jedes Nicht-Wortzeichen
\s	Passt auf jedes Leerzeichen
\S	Passt auf jedes Nicht-Leerzeichen

Lassen wir einige Metazeichen verwenden:

let muster = /\d{3}-\d{3}-\d{4}/;
console.log(muster.test("123-456-7890"));  // Ausgabe: true
console.log(muster.test("abc-def-ghij"));  // Ausgabe: false

Dieses Muster paßt auf die typische US-Telefonnummer-Format.

RegExp Eigenschaften

RegExp-Objekte haben mehrere nützliche Eigenschaften:

Eigenschaft	Beschreibung
global	Ob das "g" Flag gesetzt ist
ignoreCase	Ob das "i" Flag gesetzt ist
multiline	Ob das "m" Flag gesetzt ist
source	Der Text des Musters
lastIndex	Der Index, an dem die nächste Übereinstimmung beginnen soll

So verwendet man diese Eigenschaften:

let muster = /hello/gi;
console.log(muster.global);      // Ausgabe: true
console.log(muster.ignoreCase);  // Ausgabe: true
console.log(muster.source);      // Ausgabe: "hello"

RegExp Methoden

Schließlich werfen wir einen Blick auf einige Methoden, die wir mit RegExp-Objekten verwenden können:

Methode	Beschreibung
exec()	Führt eine Suche nach einer Übereinstimmung in einer Zeichenkette aus
test()	Testet auf eine Übereinstimmung in einer Zeichenkette
toString()	Gibt eine Zeichenkettenrepräsentation des regulären Ausdrucks zurück

Hier ist ein Beispiel mit exec():

let muster = /\d+/g;
let text = "I have 2 apples and 3 oranges.";
let match;

while ((match = muster.exec(text)) !== null) {
console.log(`Found ${match[0]} at index ${match.index}`);
}

// Ausgabe:
// Found 2 at index 7
// Found 3 at index 23

Dieser Code findet alle Zahlen im Text und meldet ihre Positionen.

Und das war's! Wir haben die Grundlagen der regulären Ausdrücke in JavaScript behandelt. Denkt daran, Übung macht den Meister. Versucht, eigene Muster zu erstellen und sie auszuprobieren. Bereit dazu, werdet ihr RegEx verwenden, um alle Arten von Zeichenkettenmanipulationsproblemen mühelos zu lösen!

Frohes Coden, und mögen eure regulären Ausdrücke stets ihre Übereinstimmung finden!

Credits: Image by storyset