Reguläre Ausdrücke in

Über Reguläre Ausdrücke

Reguläre Ausdrücke in JavaScript

Ein regulärer Ausdruck (oder Regex) ist eine Folge von Zeichen, mit der wir bestimmte Elemente in Strings ansteuern und bearbeiten können. Damit können wir:

• einen Text in einem String suchen
• Teilstrings in einem String ersetzen
• Informationen aus einem String extrahieren

Dieses Konzept konzentriert sich auf die Verwendung regulärer Ausdrücke in JavaScript. Wenn du lernen möchtest, wie man reguläre Ausdrücke schreibt, ist Eloquent JavaScript vielleicht eine gute Ressource.

💡 JavaScripts Regex-Dialekt ist Teil des ECMA-262-Standards für die Sprache. Das bedeutet, dass du dir keine Gedanken über browserspezifische Kompatibilität machen musst.

Wie du reguläre Ausdrücke erstellst

In JavaScript werden reguläre Ausdrücke meist im Format /pattern/modifiers geschrieben, wobei ‚pattern‘ das eigentliche Regex-Muster und ‚modifiers‘ eine Reihe von Zeichen sind, die wir hinzufügen können, um spezielle Optionen anzugeben (wie Superkräfte).

Dennoch gibt es zwei Möglichkeiten, einen regulären Ausdruck zu erstellen:

1. Literal für reguläre Ausdrücke:

const regex = /[a-z]/;

1. Konstruktor RegExp:

const regex = new RegExp('[a-z]');

In beiden Fällen erstellt JavaScript ein Objekt aus dem Regex. Es wird empfohlen, standardmäßig unveränderliche Muster mit dem Literal zu verwenden.

Der RegExp-Konstruktor kann für Fälle verwendet werden, in denen sich das Regex ändern wird oder wir es noch nicht kennen (wie bei einer Eingabe).

🏴‍☠️ Flags

Reguläre Ausdrücke haben optionale Superkräfte namens flags, die zusätzliche Funktionen ermöglichen. Diese Flags können einzeln oder zusammen in beliebiger Reihenfolge verwendet werden und sind Teil des regulären Ausdrucks.

Einige der am häufigsten verwendeten sind:

• /g - Globale Suche
• /i - Groß-/Kleinschreibung ignorieren
• /m - Mehrzeilige Suche

Hier ist ein einfaches Beispiel:

const re = /home/gi;
const str = 'Home, sweet home.';

str.match(re);

// => ["Home", "home"]

Das Zeichen g ermöglicht es uns, alle möglichen Übereinstimmungen in einem String zu erfassen. Ohne diese Funktion hätte JavaScript nur die erste Übereinstimmung Home extrahiert.

Das Flag /i für Groß-/Kleinschreibung ermöglicht es uns, bei der Suche nach einem Muster flexibel zu sein. So spielt es keine Rolle, ob das Gesuchte in UPPERCASE oder lowercase geschrieben ist.

Bei Verwendung des RegExp-Konstruktors ist die Syntax zum Hinzufügen von Flags anders. In diesem Fall müssen wir die Flags nur als zweites Argument übergeben.

Häufig verwendete Funktionen

Wenn reguläre Ausdrücke mit den aktuellen eingebauten Funktionen in JavaScript kombiniert werden, haben wir einige leistungsstarke Möglichkeiten, Strings zu manipulieren und Daten daraus zu gewinnen.

Die Methode test() ist eine großartige Möglichkeit, zu suchen und herauszufinden, ob ein Zielwert in einem gegebenen String existiert. Auf diese Weise gibt sie einen booleschen Wert zurück, true oder false.

Die Methode match() extrahiert die Übereinstimmung des regulären Ausdrucks aus einem gegebenen String. Sie gibt ein Array mit Informationen und Übereinstimmungen zurück.

Wann verwendest du die eine oder die andere? Verwende test(), wenn du schnell prüfen möchtest, ob ein Wert in einem String vorkommt; verwende match(), wenn du diesen Wert benötigst oder mehr Informationen über die Übereinstimmung möchtest.

Test

Die Methode test() führt eine Suche nach einer Übereinstimmung zwischen einem regulären Ausdruck und einem angegebenen String aus. Gibt wahr oder falsch zurück.

const str = 'It is difficult to test if you have a virus';
const result = /virus$/.test(str);

console.log(result);

// => true

Übereinstimmung

Okay, aber was ist, wenn wir die tatsächlichen Werte der Suche mit dem regulären Ausdruck erhalten möchten?

Statt nur einen booleschen Wert zurückzugeben, erhalten wir mit der Methode match() ein nützliches Array, dessen Inhalt davon abhängt, ob Übereinstimmungen gefunden wurden oder nicht.

Auf diese Weise können wir sowohl nach Informationen in einem beliebigen String suchen als auch Informationen extrahieren. Zum Beispiel:

const funnyQuote =
  'If you see someone crying, ask if it is because of their haircut.';
const regex1 = /someone/;
const regex2 = /happy/;

funnyQuote.match(regex1);
// => ["someone", index: 3, input: "If you see someone crying, ask if it is because of their haircut.", groups: undefined]

funnyQuote.match(regex2);
// => null

Wenn das Flag /g für die globale Suche vorhanden ist, gibt die Methode nicht nur die einzige Übereinstimmung zusammen mit nützlichen Informationen wie dem Index oder dem Input zurück, sondern alle im Array vorhandenen Vorkommen:

const funnyQuote =
  'If you see someone crying, ask if it is because of their haircut.';

const regex3 = /if/gi;

funnyQuote.match(regex3);
// => ["If", "if"];

Ersetzen

Die Methode replace() in JavaScript ermöglicht es uns, in einem gegebenen String nach einem Wert zu suchen und ihn durch einen neuen Wert zu ersetzen.

string.replace(searchValue, newValue);

Das Suchmuster für die Ersetzung kann ein einzelner String oder ein regulärer Ausdruck sein.

let string = 'I like dogs!';
let result = string.replace('dogs', 'cats');

let string = 'I would love to travel to Japan';
let result = string.replace(/Japan/g, 'Hawaii');

Außerdem können wir eine Funktion an der Ersetzungsposition anwenden, um zusätzliche Änderungen an jedem Wert vorzunehmen.

let text = 'Say hello to the chatbot.';
let result = text.replace(/chatbot|hello/gi, function (word) {
  return word.toUpperCase();
});
// => "Say HELLO to the CHATBOT"

💡 Letztendlich ist die Kombination aus regulären Ausdrücken und der Methode replace() eine dynamischere Art, Elemente zu ersetzen. Die Verwendung eines einzelnen Strings kann eingeschränkt sein.

Aufteilen

Die Methode split() in JavaScript ist eine andere Art, Strings mit regulären Ausdrücken zu verwenden und zu manipulieren.

Auf diese Weise verwenden wir Regex, um einen gegebenen String anhand eines Musters aufzuteilen, z. B. str.split(/[,.\s]/). Dieses Muster wird als separator verwendet.

const str = 'hello,user.how are.you';

const result = str.split(/[,.\s]/);

console.log(result);
// => ['hello', 'user', 'how', 'are', 'you']

Performance

Was die Performance betrifft, erstellen beide ein RegExp-Objekt. Der Hauptunterschied besteht darin, wie oft das Regex kompiliert wird:

• Mit Regular Expression Literal: einmal während des anfänglichen Parsens und Kompilierens des Codes
• Mit der RegExp()-Syntax: Jedes Mal, wenn ein neues Objekt erstellt wird.

Die Literal-Syntax kann nicht nur wegen der Performance die bessere Option sein, sondern auch wegen ihrer Einfachheit und Lesbarkeit. Weitere Details findest du in dieser Stackoverflow-Diskussion.

1. Sie ist kürzer und zwingt dich nicht, in klassenähnlichen Konstruktoren zu denken.
2. Bei der Verwendung des RegExp()-Konstruktors musst du außerdem Anführungszeichen escapen und Backslashes doppelt escapen. Das macht reguläre Ausdrücke, die von Natur aus schwer zu lesen und zu verstehen sind, noch schwieriger.