A beginner’s guide to regular expressions in JavaScript

Everyone who uses JavaScript has to deal with strings at some point. Sometimes you just store the string in another variable and pass it around. Other times you have to inspect it and see if it contains a specific substring.

However, things are not always easy. Sometimes you are not looking for a specific substring, but rather a set of substrings that follow a specific pattern.

Suppose you have to replace all occurrences of "Apples" in a string with "apples". You can simply use theMainString.replace("Apples", "apples"). Good and easy.

Now assume you also have to replace "appLes" with "apples". Likewise, "appLES" should become "apples". Basically, all case variations of "Apple" need to be changed to "apple". In this case, passing a simple string as an argument is no longer practical or efficient.

This is where regular expressions come in - you can simply use the case-insensitive flag i and be done with it. With this flag, it doesn't matter whether the original string contains "Apples", "APPles", "ApPlEs", or "Apples". Every instance of the word will be replaced with "apples".

Just like the case-insensitive flag, regular expressions provide many other features, which this tutorial will cover.

Using regular expressions in JavaScript

You must use slightly different syntax to indicate regular expressions within different String methods. Unlike a simple string enclosed in quotes, a regular expression consists of a pattern enclosed between slashes. Any flags you use in the regular expression will be appended after the second slash.

Back to the previous example, here's what the replace() method looks like using regular expressions and simple strings.

"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

As you can see, the regular expression works in both cases. We will now learn more about the flags and special characters that make up patterns within regular expressions.

Backslashes in regular expressions

You can convert normal characters to special characters by adding a backslash before them. Likewise, you can convert special characters to normal characters by adding a backslash before them.

For example, d is not a special character. However, \d is used to match numeric characters in a string. Likewise, D is not a special character, but \D is used to match non-numeric characters in a string.

Numeric characters include 0, 1, 2, 3, 4, 5, 6, 7, 8 and 9. When you use \d in a regular expression, it will match any of the following nine characters. When you use \D in a regular expression, it will match all non-numeric characters.

The following example should make things clear.

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

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

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

You should note that in the third case, only the first matching character is replaced. You can also use flags to replace all matches. We will learn about such flags later.

Just like \d and \D, there are other special character sequences.

1. You can use \w to match any "word" character in a string. Here, word characters refer to A-Z, a-z, 0-9, and _. So basically, it will match all numbers, all lowercase and uppercase letters, and underscores.
2. You can use \W to match any non-word character in a string. It will match characters like %, $, #, $, etc.
3. You can use \s to match a single whitespace character, which includes space, tab, formfeed, and newline characters. Likewise, you can use \S to match all other characters except spaces.
4. You can also use \f, \n, \r, \t and \v , representing page feed, line feed, carriage return, horizontal tab and vertical tab respectively.

Sometimes you'll encounter a situation where you need to replace a word with an alternative, but only if it is not part of a larger word. For example, consider the following sentences:

"There are tons of pineapple pictures posted on the app."

In this example, we want to replace the word "app" with "board". However, using a simple regex pattern would turn "apple" into "boardle" and the final sentence would become:

"There are many pine board images posted on the app".

在这种情况下，您可以使用另一个特殊字符序列：\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强>，等等。

类似地，您可以使用 + 来匹配前面的表达式 1 次或多次。例如，/Ap+/ 将匹配 Ap、App、Appp 等。这次表达式将不会匹配单个 A。

有时，您只想匹配给定模式的特定出现次数。在这种情况下，您应该使用 {n} 字符序列，其中 n 是数字。例如，/Ap{2}/ 将匹配 App，但不匹配 Ap。它还将匹配 Appp 中的前两个“p”，并保持第三个“p”不变。

您可以使用 {n,} 来匹配给定表达式的至少“n”次出现。这意味着 /Ap{2,}/ 将匹配 App，但不匹配 Ap。它还将匹配 Apppp 中的所有“p”，并将它们替换为您的替换字符串。

您还可以使用 {n,m} 指定最小和最大数量，并限制给定表达式应匹配的次数。例如，/Ap{2,4}/ 将匹配 App、Appp 和 Apppp。它还将匹配 Apppppp 中的前四个“p”，并保持其余部分不变。

"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

使用括号来记住匹配

到目前为止，我们只用常量字符串替换了模式。例如，在上一节中，我们使用的替换始终是“Add”。有时，您必须在给定字符串中查找模式匹配，然后将其替换为模式的一部分。

假设您必须在字符串中找到一个包含五个或更多字母的单词，然后在该单词的末尾添加一个“s”。在这种情况下，您将无法使用常量字符串值作为替换，因为最终值取决于匹配模式本身。

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

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

这是一个简单的示例，但您可以使用相同的技术在内存中保留多个匹配模式。完整匹配中的子模式数量将由使用的括号数量决定。

在替换字符串中，第一个子匹配将使用 $1 标识，第二个子匹配将使用 $2 标识，依此类推。这是另一个例子，进一步阐明括号的用法。

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

将标志与正则表达式结合使用

正如我在简介中提到的，正则表达式的一个更重要的功能是使用特殊标志来修改搜索的执行方式。这些标志是可选的，但您可以使用它们来执行诸如全局搜索或不区分大小写之类的操作。

这些是四个常用的标志，用于更改 JavaScript 搜索或替换字符串的方式。

• g：该标志将执行全局搜索，而不是在第一个匹配后停止。
• i：此标志将执行搜索，而不检查大小写是否完全匹配。例如，在不区分大小写的搜索中，Apple、aPPLe 和 apPLE 的处理方式都是相同的。
• m：该标志将执行多行搜索。
• y：此标志将在 lastIndex 属性指示的索引中查找匹配项。

以下是与标志一起使用的正则表达式的一些示例：

"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"

最终想法

本教程的目的是向您介绍 JavaScript 中的正则表达式及其重要性。我们从基础知识开始，然后介绍反斜杠和其他特殊字符。我们还学习了如何检查字符串中的重复模式以及如何记住模式中的部分匹配以便以后使用它们。

最后，我们了解了常用的标志，它们使正则表达式变得更加强大。您可以在 MDN 上的这篇文章中了解有关正则表达式的更多信息。

If you want me to clarify anything in this tutorial, please feel free to let me know in the comments.

The above is the detailed content of A beginner’s guide to regular expressions in JavaScript. For more information, please follow other related articles on the PHP Chinese website!