Kapitel 14

Regulärer Ausdruck

Ein regulärer Ausdruck ist ein Objekt, das entweder mit dem RegExp-Konstruktor erstellt werden kann oder als Literalwert, indem ein Muster in Schrägstriche (/) eingeschlossen wird. Die Syntaxen zum Erstellen eines regulären Ausdrucks sind unten gezeigt.

// Verwendung des regulären Ausdrucks-Konstruktors
new RegExp(pattern[, flags]);

// Verwendung von Literalen
/pattern/flags

Die Flags sind optional beim Erstellen eines regulären Ausdrucks mit Literalen. Beispiel für die Erstellung eines identischen regulären Ausdrucks mit den oben genannten Methoden:

let re1 = new RegExp("xyz"); 
let re2 = /xyz/;

Beide Methoden erzeugen ein Regex-Objekt und haben die gleichen Methoden und Eigenschaften. Es gibt Fälle, in denen wir dynamische Werte zum Erstellen eines regulären Ausdrucks benötigen – in diesem Fall funktionieren Literale nicht und wir müssen den Konstruktor verwenden.

Die verschiedenen Modifikatoren, die verwendet werden, um eine Groß-/Kleinschreibung-unabhängige Suche durchzuführen, sind:

• g – globale Suche (findet alle Übereinstimmungen, anstatt nach der ersten Übereinstimmung zu stoppen)

Beispiel :

const str = "Hello world, hello again!";
const regex = /hello/gi;
const matches = str.match(regex);
// Wenn du über .match() nachdenkst, lies das hier 👇
// Es ist eine eingebaute Methode in JavaScript, die verwendet wird, um eine Zeichenkette nach einem Ausdruck abzugleichen. Wenn eine Übereinstimmung gefunden wird, gibt sie ein Array aller gefundenen Übereinstimmungen zurück.
// Wenn nicht, gibt die .match()-Methode null zurück.

console.log(matches); // ["Hello", "hello"]

• i – Suche ohne Beachtung der Groß-/Kleinschreibung

Beispiel :

const str = "HeLlO WoRlD";
const regex = /hello/i;
const match = regex.test(str);
// Die .test()-Methode gibt einen booleschen Wert zurück:
// true, wenn eine Übereinstimmung gefunden wird, und false, wenn nicht.

console.log(match); // true

• m – mehrzeiliges Matching

Beispiel :

const str = "This is a\nmultiline string.";
const regex = /./mg;
const matches = str.match(regex);
// Das m-Flag wird verwendet, um Zeilenumbrüche (\n) abzugleichen.
// Das bedeutet, dass der RegEx alle 26 Zeichen in der Zeichenkette abgleicht,
// einschließlich des Zeilenumbruchs.

console.log(matches.length); // 26

Klammern werden in einem regulären Ausdruck verwendet, um einen Zeichenbereich zu finden. Einige davon sind unten aufgeführt.

• [abc] – findet jedes Zeichen zwischen den Klammern

Beispiel :

const str = "The cat and the dog are both animals.";
const regex = /[abc]/g;
const matches = str.match(regex);

console.log(matches); // Array aller Vorkommen von a, b und c

[
  'c', 'a', 'a',
  'a', 'b', 'a',
  'a'
]

• [^abc] – findet jedes Zeichen, das nicht zwischen den Klammern ist

Beispiel :

const str = "The cat and dog.";
const regex = /[^abc]/g; // Findet jedes Zeichen, das nicht 'a', 'b' oder 'c' ist
const matches = str.match(regex);

console.log(matches); // Array aller Vorkommen von Zeichen, die nicht 'a', 'b' oder 'c' sind

[
  'T', 'h', 'e', ' ',
  't', ' ', 'n', 'd',
  ' ', 'd', 'o', 'g',
  '.'
]

• [0-9] – findet jede Ziffer zwischen den Klammern

Beispiel :

const str = "The price of the item is $25, but it may change to $30.";
const regex = /[0-9]/g; // Findet jede Ziffer von 0 bis 9
const matches = str.match(regex);

console.log(matches); // Array aller Ziffernvorkommen

[
  '2', '5', '3', '0'
]

• [^0-9] – findet jedes Zeichen, das nicht zwischen den Klammern ist (keine Ziffer)

Beispiel:

const str = "The price is $25.";
const regex = /[^0-9]/g; // Findet jedes Zeichen, das keine Ziffer ist
const matches = str.match(regex);

console.log(matches); // Array aller Vorkommen von Nicht-Ziffern

[
  'T', 'h', 'e', ' ',
  'p', 'r', 'i', 'c',
  'e', ' ', 'i', 's',
  ' ', '$', '.'
]

*(x|y)– findet eines der Alternativen, getrennt durch ein |

Beispiel:

const str = "The words 'xylophone' and 'yellow' contain the letters 'x' and 'y'.";
const regex = /(x|y)/g; // Findet entweder 'x' oder 'y'
const matches = str.match(regex);

console.log(matches); // Array aller Vorkommen von 'x' oder 'y'

[
  'x', 'y', 'y', 'x', 'x', 'y'
]

Metazeichen sind Sonderzeichen, die in regulären Ausdrücken eine besondere Bedeutung haben. Hier eine Übersicht:

Eigenschaften und Methoden, die von RegEx unterstützt werden:

Ein häufiges Beispiel für reguläre Ausdrücke

let text = "The best things in life are free";
let result = /e/.exec(text); // sucht nach einem "e" in einem String
console.log(result); // Ausgabe: ["e", 2, "The best things in life ar...]


let helloWorldText = "Hello world!";
// Suche nach "Hello"
let pattern1 = /Hello/g;
let result1 = pattern1.test(helloWorldText);
// result1: true

let pattern1String = pattern1.toString();
// pattern1String : '/Hello/g'

Ein Praxisbeispiel: PLZ-Prüfung mit RegEx

const handleSubmit = (e) => {
  // Verhindert das automatische Absenden des Formulars
  e.preventDefault(); 

  // Definiert eine Liste gültiger Postleitzahlen
  const validPincodes = [
    110001, 110002, 110003, 110004, 110005, 110006, 110007, 110008, 110009,
    110010, 110011, 110012, 110013, 110014, 110015, 110016, 110017, 110018,
    110019, 110020, 110021, 110022, 110023, 110050, 110051, 110056, 110048,
    110057, 110058, 110059, 110060, 110061, 110062, 110063, 110064
  ];

  // Umwandlung der Postleitzahlen in Zeichenketten
  const validPincodeStrings = validPincodes.map((pincode) => String(pincode));

  // Erzeugt ein RegEx-Muster, das nur gültige PLZ zulässt
  const regexPattern = new RegExp(`^(${validPincodeStrings.join("|")})$`);

  // Bekommt die PLZ vom Eingabefeld
  const submittedPincode = pincode; // 'pincode' muss irgendwo definiert sein

  // Prüfung, ob die eingegebne PLZ ein gültiges Eingabemuster ist
  if (regexPattern.test(submittedPincode)) {
    // Erfolgsmeldung anzeigen
    // ...
  } else if (submittedPincode === "") {
    // Fehlermeldung bei leerer Eingabe
    // ...
  } else if (submittedPincode.length < 6) {
    // Fehlermeldung bei falscher Eingabelänge
    // ...
  }
}