JavaScript中正则表达式的初学者指南

每个使用 JavaScript 的人都必须在某一时刻处理字符串。有时，您只需将字符串存储在另一个变量中，然后将其传递出去。其他时候，您必须检查它并查看它是否包含特定的子字符串。

然而，事情并不总是那么容易。有时您不会查找特定的子字符串，而是查找遵循特定模式的一组子字符串。

假设您必须将字符串中所有出现的“Apples”替换为“apples”。您可以简单地使用 theMainString.replace(\”Apples\”, \”apples\”)。好，易于。

现在假设您还必须将“appLes”替换为“apples”。同样，“appLES”也应该变成“apples”。基本上，“Apple”的所有大小写变体都需要更改为“apple”。在这种情况下，传递简单字符串作为参数将不再实用或高效。

这就是正则表达式的用武之地 – 您可以简单地使用不区分大小写的标志 i 并完成它。使用该标志后，原始字符串是否包含“Apples”、“APPles”、“ApPlEs”或“Apples”并不重要。该单词的每个实例都将替换为“apples”。

就像不区分大小写的标志一样，正则表达式提供了许多其他功能，本教程将介绍这些功能。

在 JavaScript 中使用正则表达式

您必须使用稍微不同的语法来指示不同 String 方法内的正则表达式。与用引号括起来的简单字符串不同，正则表达式由括在斜杠之间的模式组成。您在正则表达式中使用的任何标志都将附加在第二个斜杠之后。

回到前面的示例，下面是 replace() 方法使用正则表达式和简单字符串的样子。

\”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

正如您所看到的，正则表达式在这两种情况下都有效。我们现在将了解有关构成正则表达式内模式的标志和特殊字符的更多信息。

正则表达式中的反斜杠

您可以通过在普通字符前添加反斜杠将其转换为特殊字符。同样，您可以通过在特殊字符前添加反斜杠将其转换为普通字符。

例如，d 不是特殊字符。然而， \\d 用于匹配字符串中的数字字符。同样，D 也不是特殊字符，但 \\D 用于匹配字符串中的非数字字符。

数字字符包括 0、1、2、3、4、5、6、7、8 和 9。当您在正则表达式中使用 \\d 时，它将匹配以下任何一个九个字符。当您在正则表达式中使用 \\D 时，它将匹配所有非数字字符。

下面的例子应该可以让事情变得清楚。

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

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

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

您应该注意，在第三种情况下，仅替换第一个匹配的字符。您还可以使用标志来替换所有匹配项。我们稍后将了解此类标志。

就像 \\d 和 \\D 一样，还有其他特殊字符序列。

您可以使用 \\w 来匹配字符串中的任何“word”字符。这里，单词字符是指A-Z、a-z、0-9和_。因此，基本上，它将匹配所有数字、所有小写和大写字母以及下划线。

您可以使用 \\W 来匹配字符串中的任何非单词字符。它将匹配 %、$、#、 $ 等字符。

您可以使用 \\s 来匹配单个空白字符，其中包括空格、制表符、换页符和换行符。同样，您可以使用 \\S 来匹配除空格之外的所有其他字符。

您还可以使用 \\f、\\n、\\r、\\t 和 \\v，分别代表换页、换行、回车、水平制表符和垂直制表符。

有时，您会遇到需要用替代词替换某个词的情况，但前提是它不是较大词的一部分。例如，考虑以下句子：

“应用程序上发布了大量菠萝图片”。

在本例中，我们希望将“app”一词替换为“board”。然而，使用简单的正则表达式模式会将“apple”变成“boardle”，最终的句子将变成：

“应用程序上发布了很多松板图像”。

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