Ein Anfängerleitfaden zu regulären Ausdrücken in JavaScript

Jeder, der JavaScript verwendet, muss sich irgendwann mit Strings auseinandersetzen. Manchmal speichert man die Zeichenfolge einfach in einer anderen Variablen und gibt sie weiter. In anderen Fällen müssen Sie es untersuchen und prüfen, ob es eine bestimmte Teilzeichenfolge enthält.

Allerdings sind die Dinge nicht immer einfach. Manchmal suchen Sie nicht nach einem bestimmten Teilstring, sondern nach einer Reihe von Teilstrings, die einem bestimmten Muster folgen.

Angenommen, Sie müssen alle Vorkommen von „Apples“ in einer Zeichenfolge durch „apples“ ersetzen. Sie können einfach theMainString.replace("Apples", "apples") verwenden. Gut und einfach.

Angenommen, Sie müssen auch „appLes“ durch „apples“ ersetzen. Ebenso sollte „appLES“ zu „apples“ werden. Grundsätzlich müssen alle Schreib- und Schreibweisen von „Apple“ in „apple“ geändert werden. In diesem Fall ist die Übergabe einer einfachen Zeichenfolge als Argument nicht mehr praktisch oder effizient.

Hier kommen reguläre Ausdrücke ins Spiel – Sie können einfach das Flag „Groß-/Kleinschreibung nicht berücksichtigen“ verwenden i und fertig. Mit diesem Flag spielt es keine Rolle, ob die ursprüngliche Zeichenfolge „Apples“, „APPles“, „ApPlEs“ oder „Apples“ enthält. Jedes Vorkommen des Wortes wird durch „Äpfel“ ersetzt.

Genau wie die Flagge, bei der die Groß-/Kleinschreibung nicht beachtet wird, bieten reguläre Ausdrücke viele weitere Funktionen, die in diesem Tutorial behandelt werden.

Verwendung regulärer Ausdrücke in JavaScript

Sie müssen eine leicht unterschiedliche Syntax verwenden, um reguläre Ausdrücke in verschiedenen String Methoden anzugeben. Im Gegensatz zu einer einfachen Zeichenfolge, die in Anführungszeichen eingeschlossen ist, besteht ein regulärer Ausdruck aus einem zwischen Schrägstrichen eingeschlossenen Muster. Alle Flags, die Sie im regulären Ausdruck verwenden, werden nach dem zweiten Schrägstrich angehängt.

Zurück zum vorherigen Beispiel: Hier sehen Sie, wie die replace()-Methode mit regulären Ausdrücken und einer einfachen Zeichenfolge aussieht.

"I ate Apples".replace("Apples", "apples");
// I ate apples

"I ate Apples".replace(/Apples/i, "apples");
// I ate apples

"I ate aPPles".replace("Apples", "apples");
// I ate aPPles

"I ate aPPles".replace(/Apples/i, "apples");
// I ate apples

Wie Sie sehen, funktioniert der reguläre Ausdruck in beiden Fällen. Wir erfahren nun mehr über die Flags und Sonderzeichen, aus denen Muster in regulären Ausdrücken bestehen.

Backslash in regulären Ausdrücken

Sie können normale Zeichen in Sonderzeichen umwandeln, indem Sie ihnen einen Backslash voranstellen. Ebenso können Sie Sonderzeichen in normale Zeichen umwandeln, indem Sie ihnen einen Backslash voranstellen.

Zum Beispiel wird d 不是特殊字符。然而， d 用于匹配字符串中的数字字符。同样，D 也不是特殊字符，但 D verwendet, um nicht numerische Zeichen in einer Zeichenfolge abzugleichen.

Zu den Zahlenzeichen gehören 0, 1, 2, 3, 4, 5, 6, 7, 8 und 9. Wenn Sie d 时，它将匹配以下任何一个九个字符。当您在正则表达式中使用 D in einem regulären Ausdruck verwenden, werden alle nicht numerischen Zeichen abgeglichen.

Das folgende Beispiel soll die Sache verdeutlichen.

"L8".replace(/\d/i, "E");
// LE

"L8".replace(/\D/i, "E");
// E8

"LLLLL8".replace(/\D/i, "E");
// ELLLL8

Beachten Sie, dass im dritten Fall nur das erste passende Zeichen ersetzt wird. Sie können Flags auch verwenden, um alle Übereinstimmungen zu ersetzen. Wir werden später mehr über solche Flaggen erfahren.

Genau wie d 和 D gibt es noch weitere Sonderzeichenfolgen.

1. Sie können w verwenden, um jedes „Wort“-Zeichen in einer Zeichenfolge zuzuordnen. Hier beziehen sich Wortzeichen auf A-Z, a-z, 0-9 und _. Im Grunde werden also alle Zahlen, alle Klein- und Großbuchstaben sowie Unterstriche abgeglichen.
2. Sie können W verwenden, um jedes Nicht-Wort-Zeichen in einer Zeichenfolge abzugleichen. Es werden Zeichen wie %, $, #, $ usw. gefunden.
3. Sie können s 来匹配单个空白字符，其中包括空格、制表符、换页符和换行符。同样，您可以使用 S verwenden, um alle anderen Zeichen außer Leerzeichen abzugleichen.
4. Sie können f、n、r、t 和 v auch verwenden, um Seitenvorschub, Zeilenvorschub, Wagenrücklauf, horizontalen Tabulator bzw. vertikalen Tabulator darzustellen.

Manchmal stoßen Sie auf eine Situation, in der Sie ein Wort durch eine Alternative ersetzen müssen, aber nur, wenn es nicht Teil eines größeren Wortes ist. Betrachten Sie zum Beispiel den folgenden Satz:

"Viele Ananasbilder in der App gepostet".

In diesem Beispiel möchten wir das Wort „App“ durch „Board“ ersetzen. Die Verwendung eines einfachen Regex-Musters würde jedoch „apple“ in „boardle“ verwandeln und der letzte Satz würde wie folgt lauten:

„In der App sind viele Bilder von Kiefernbrettern gepostet.“

在这种情况下，您可以使用另一个特殊字符序列：\b。这会检查单词边界。单词边界是通过使用任何非单词字符（如空格、“$”、“%”、“#”等）形成的。不过请注意，它还包括重音字符，如“ü”。

"A lot of pineapple images were posted on the app".replace(/app/, "board");
// A lot of pineboardle images were posted on the app

"A lot of pineapple images were posted on the app".replace(/\bapp/, "board");
// A lot of pineapple images were posted on the board

同样，您可以使用 \B 来匹配非单词边界。例如，您可以使用 \B 仅匹配位于另一个单词（如“pineapple”）内的“app”。

匹配模式“n”次

您可以使用 ^ 告诉 JavaScript 仅查看字符串的开头以进行匹配。同样，您可以使用 $ 仅查看字符串末尾的匹配项。

您可以使用 * 来匹配前面的表达式 0 次或多次。例如，/Ap*/ 将匹配 A、Ap、App、Appp，等等。

"Apppppples".replace(/Ap*/, "App");
// Apples

"Ales".replace(/Ap*/, "App");
// Apples

"Appppples".replace(/Ap{2}/, "Add");
// Addppples

"Appppples".replace(/Ap{2,}/, "Add");
// Addles

"Appppples".replace(/Ap{2,4}/, "Add");
// Addples

"I like Apple".replace(/(\w{5,})/, '$1s');
// I like Apples

"I like Banana".replace(/(\w{5,})/, '$1s');
// I like Bananas

"I am looking for John and Jason".replace(/(\w+)\sand\s(\w+)/, '$2 and $1');
// I am looking for Jason and John

"I ate apples, you ate apples".replace(/apples/, "mangoes");
// "I ate mangoes, you ate apples"

"I ate apples, you ate apples".replace(/apples/g, "mangoes");
// "I ate mangoes, you ate mangoes"

"I ate apples, you ate APPLES".replace(/apples/, "mangoes");
// "I ate mangoes, you ate APPLES"

"I ate apples, you ate APPLES".replace(/apples/gi, "mangoes");
// "I ate mangoes, you ate mangoes"


var stickyRegex = /apples/y;
stickyRegex.lastIndex = 3;
"I ate apples, you ate apples".replace(stickyRegex, "mangoes");
// "I ate apples, you ate apples"

var stickyRegex = /apples/y;
stickyRegex.lastIndex = 6;
"I ate apples, you ate apples".replace(stickyRegex, "mangoes");
// "I ate mangoes, you ate apples"

var stickyRegex = /apples/y;
stickyRegex.lastIndex = 8;
"I ate apples, you ate apples".replace(stickyRegex, "mangoes");
// "I ate apples, you ate apples"