W3docs

JavaScript Regex ^ und $ Anker

Anker sind Sonderzeichen in regulären Ausdrücken, die Positionen innerhalb eines Strings abgleichen. Die zwei wichtigsten Anker sind ^ und $.

Einführung in Anker in JavaScript

Anker sind Sonderzeichen in regulären Ausdrücken, die es ermöglichen, Positionen innerhalb eines Strings anstelle tatsächlicher Zeichen abzugleichen. Die zwei wichtigsten Anker in JavaScript sind ^ (Caret) und $ (Dollarzeichen). Der ^-Anker stellt sicher, dass der Treffer am Anfang des Strings beginnen muss, während der $-Anker sicherstellt, dass der Treffer am Ende des Strings auftreten muss.

Ein grundlegendes Konzept, das man zunächst verstehen sollte: Anker haben keine Breite. Sie treffen eine Position zwischen Zeichen, nicht ein Zeichen selbst, sodass sie niemals Text verbrauchen. Deshalb trifft /^abc$/ den drei Zeichen langen string "abc" und keinen vier- oder fünfzeichigen string — ^ und $ fügen dem Treffer keine Länge hinzu. Diese Eigenschaft ermöglicht es, einen Anker in replace zu verwenden, um Text ganz am Anfang oder Ende eines Strings einzufügen, ohne dabei etwas zu entfernen:

javascript— editable

Diese Seite behandelt das Abgleichen von Anfang und Ende eines Strings, die Kombination beider Anker für exakte vollständige String-Übereinstimmungen, wie das m-Flag (Multiline) ihr Verhalten ändert, und wie Anker mit test() und match() funktionieren.

Der ^ Anker: Anfang eines Strings abgleichen

Der ^-Anker wird verwendet, um zu prüfen, ob ein string mit einem bestimmten Muster beginnt.

Verwendung des ^ Ankers

javascript— editable

In diesem Beispiel stellt ^Hello sicher, dass der string mit "Hello" beginnt. Der string 'Hello, world!' entspricht dem Muster, aber 'Say Hello, world!' nicht, weil "Hello" nicht am Anfang steht.

Praktisches Beispiel: Validierung des Anfangs einer E-Mail-Adresse

javascript— editable

Dieser reguläre Ausdruck prüft, ob eine E-Mail-Adresse mit einem gültigen Benutzernamen beginnt. Der string '[email protected]' entspricht dem Muster, und '[email protected]' ebenfalls, weil beide mit einem gültigen Benutzernamen vor dem @-Symbol beginnen.

Der $ Anker: Ende eines Strings abgleichen

Der $-Anker wird verwendet, um zu prüfen, ob ein string mit einem bestimmten Muster endet.

Verwendung des $ Ankers

javascript— editable

In diesem Beispiel stellt world!$ sicher, dass der string mit "world!" endet. Der string 'Hello, world!' entspricht dem Muster, aber 'Hello, world' nicht, weil das Ausrufezeichen am Ende fehlt.

Praktisches Beispiel: Validierung einer Dateiendung

javascript— editable

Dieser reguläre Ausdruck prüft, ob ein Dateiname mit ".txt" endet. Der string 'document.txt' entspricht dem Muster, während 'document.pdf' nicht passt.

Info

Anker (^ und $) in regulären Ausdrücken von JavaScript ermöglichen es, den Anfang oder das Ende eines Strings präzise abzugleichen und so eine genaue Textvalidierung und -manipulation zu gewährleisten.

Kombination von ^ und $ für exakte Übereinstimmungen

Durch die Kombination von ^ und $ lässt sich ein regulärer Ausdruck erstellen, der einen string von Anfang bis Ende exakt abgleicht.

Verwendung beider Anker

javascript— editable

In diesem Beispiel stellt ^Hello, world!$ sicher, dass der gesamte string "Hello, world!" entspricht. Nur der string 'Hello, world!' passt exakt.

Praktisches Beispiel: Validierung eines exakten Musters

javascript— editable

Dieser reguläre Ausdruck stellt sicher, dass die E-Mail-Adresse von Anfang bis Ende ein gültiges Format hat. Er prüft auf einen gültigen Benutzernamen, ein "@"-Symbol, einen Domainnamen und eine Top-Level-Domain.

Anker für präzise Validierung verwenden

Anker sind besonders nützlich für die Validierung von Eingaben, bei denen sichergestellt werden muss, dass der gesamte string einem Muster entspricht. Verwenden Sie beispielsweise ^ und $, um Telefonnummern, Postleitzahlen oder andere Eingaben mit festem Format zu validieren.

Beispiel: Validierung einer US-Telefonnummer

javascript— editable

Dieser reguläre Ausdruck stellt sicher, dass die Telefonnummer das Format (123) 456-7890 hat. Er verwendet ^, um den Anfang zu verankern, und $, um das Ende zu verankern, und stellt so sicher, dass der gesamte string dem angegebenen Muster entspricht.

Anker und das Multiline-Flag (m)

Standardmäßig treffen ^ und $ nur den absoluten Anfang und das absolute Ende des gesamten Strings, selbst wenn dieser Zeilenumbrüche enthält. Fügt man das m-Flag (Multiline) hinzu, ändert sich die Bedeutung: ^ und $ treffen dann auch den Anfang und das Ende jeder einzelnen Zeile.

javascript— editable

Ohne m gibt /^.+$/g null zurück, weil . keine Zeilenumbruchzeichen trifft und somit keine einzelne Zeile den gesamten string von Anfang bis Ende abdeckt. Mit m wird jede Zeile unabhängig abgeglichen. Wenn man mit mehrzeiligen Eingaben arbeitet, ist das m-Flag fast immer das Richtige — weitere Details finden sich unter Multiline-Modus von Ankern, Flag "m".

Anker mit test() und match()

Anker verhalten sich gleich, unabhängig davon, welche Methode aufgerufen wird; der Unterschied liegt darin, was jede Methode zurückgibt.

  • regexp.test(str) gibt einen boolean zurück — ideal für die Validierung ("beginnt/endet dieser string richtig?").
  • str.match(regexp) gibt den übereinstimmenden Text zurück (oder ein array mit dem g-Flag), oder null, wenn keine Übereinstimmung vorliegt — nützlich, wenn auch der gefundene Wert benötigt wird.
javascript— editable

Da \d+$ am Ende verankert ist, erfasst es die abschließende Zahl 42 und nichts anderes. Wenn nur eine Ja/Nein-Antwort benötigt wird, bevorzugt man test(); match() kommt zum Einsatz, wenn der Wert selbst zurückgegeben werden soll.

Info

Wenn man ein bestimmtes Zeichen an einer Grenze zwischen einem Wort und einem Nicht-Wort-Zeichen abgleichen möchte, anstatt am String-Rand, verwendet man \b als Wortgrenze anstelle von ^ oder $.

Fazit

Anker sind leistungsstarke Werkzeuge in regulären Ausdrücken von JavaScript, die es ermöglichen, Positionen innerhalb eines Strings abzugleichen. Durch die Beherrschung der ^- und $-Anker lassen sich präzise und effektive Muster für die Validierung und Manipulation von Strings erstellen. Ob man sicherstellt, dass ein string mit einem bestimmten Muster beginnt oder endet, oder ob ein gesamter string exakt abgeglichen wird — Anker sind für robuste Regex-Operationen unverzichtbar.

Übungen

Übung
Was gilt für die Verwendung von Caret (^) und Dollar ($) in JavaScript?
Was gilt für die Verwendung von Caret (^) und Dollar ($) in JavaScript?
Was this page helpful?