JavaScript String.Replace () Beispiel mit RegEx

Reguläre Ausdrücke (auch RegEx oder RegExp genannt) sind eine leistungsstarke Methode zur Analyse von Text. Mit RegEx können Sie Zeichenfolgen an Punkten abgleichen, die bestimmten Zeichen (z. B. JavaScript) oder Mustern (z. B. NumberStringSymbol - 3a &) entsprechen.

Die .replaceMethode wird für Zeichenfolgen in JavaScript verwendet, um Teile der Zeichenfolge durch Zeichen zu ersetzen. Es wird oft so verwendet:

const str = 'JavaScript'; const newStr = str.replace("ava", "-"); console.log(newStr); // J-Script 

Wie Sie oben sehen können, akzeptiert die Ersetzungsmethode zwei Argumente: die zu ersetzende Zeichenfolge und die, durch die die Zeichenfolge ersetzt werden soll.

Hier kommt Regex ins Spiel .

Die Verwendung von .replaceoben ist begrenzt: Die zu ersetzenden Zeichen sind bekannt - "ava". Was ist, wenn wir uns stattdessen mit einem Muster befassen? Vielleicht eine Zahl, zwei Buchstaben und das Wort "foo" oder drei zusammen verwendete Symbole?

Die mit verwendete .replaceMethode RegExkann dies erreichen. RegExkann effektiv verwendet werden, um Muster neu zu erstellen. Wenn .replacewir dies mit Mitteln kombinieren , können wir Muster und nicht nur exakte Zeichen ersetzen.

Wie benutzt man RegExmit .replacein JavaScript

Um RegEx zu verwenden, wird beispielsweise das erste Argument von replacedurch die Regex-Syntax ersetzt /regex/. Diese Syntax dient als Muster, bei dem alle Teile der Zeichenfolge, die mit ihr übereinstimmen, durch die neue Teilzeichenfolge ersetzt werden.

Hier ist ein Beispiel:

// matches a number, some characters and another number const reg = /\d.*\d/ const str = "Java3foobar4Script" const newStr = str.replace(reg, "-"); console.log(newStr); // "Java-Script" 

Die Zeichenfolge 3foobar4entspricht dem regulären Ausdruck /\d.*\d/und wird daher ersetzt.

Was wäre, wenn wir an mehreren Stellen Ersatz durchführen wollten?

Regexbietet das bereits mit dem g(globalen) Flag an, und das gleiche kann mit verwendet werden replace. Hier ist wie:

const reg = /\d{3}/g const str = "Java323Scr995ip4894545t"; const newStr = str.replace(reg, ""); console.log(newStr); // JavaScrip5t // 5 didn't pass the test :( 

Die Regex entspricht Teilen der Zeichenfolge, die genau drei aufeinanderfolgende Zahlen sind. 323passt zu ihm, 995passt zu ihm, 489passt zu ihm und 454passt zu ihm. Aber der letzte 5stimmt nicht mit dem Muster überein.

Das Ergebnis JavaScrip5tzeigt, wie die Muster korrekt übereinstimmen und durch den neuen Teilstring (eine leere Zeichenfolge) ersetzt werden.

Das Fallflag - ikann auch verwendet werden. Dies bedeutet, dass Sie Muster ersetzen können, bei denen die Groß- und Kleinschreibung nicht berücksichtigt wird. So wird es verwendet:

const reg1 = /\dA/ const reg2 = /\dA/i const str = "Jav5ascript" const newStr1 = str.replace(reg1, "--"); const newStr2 = str.replace(reg2, "--"); console.log(newStr1) // Jav5ascript console.log(newStr2) // Jav--script 

..5a..stimmt nicht mit der ersten Syntax überein, da bei RegEx standardmäßig zwischen Groß- und Kleinschreibung unterschieden wird. Bei Verwendung des iFlags, wie in der zweiten Syntax dargestellt, wird die Zeichenfolge jedoch wie erwartet ersetzt.

So verwenden Sie Split mit regulären Ausdrücken

splitverwendet auch RegEx. Das heißt, Sie können eine Zeichenfolge nicht nur an Teilzeichenfolgen aufteilen, die exakten Zeichen entsprechen, sondern auch an Mustern.

Hier ist ein kurzer Blick:

const regex = /\d{2}a/; const str = "Hello54 How 64aare you"; console.log(str.split(regex)) // ["Hello54 How ", "are you"] 

Die Zeichenfolge war splitauf, 64aweil dieser Teilstring mit dem angegebenen regulären Ausdruck übereinstimmt.

Beachten Sie, dass das globale Flag - g- in splitim Gegensatz zum iFlag und anderen Flags irrelevant ist . Dies liegt daran, dass splitdie Zeichenfolge an den verschiedenen Punkten aufgeteilt wird, mit denen der reguläre Ausdruck übereinstimmt.

Einpacken

RegExmacht replaceZeichenfolgen in JavaScript effektiver, leistungsfähiger und macht Spaß.

Sie sind nicht nur auf exakte Zeichen beschränkt, sondern auch auf Muster und mehrere Ersetzungen gleichzeitig. In diesem Artikel haben wir anhand einiger Beispiele gesehen, wie sie zusammenarbeiten.

Prost auf RegEx?