JavaScript中正規表示式的初學者指南-＆＃＆按-PHP中文網

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"
登入後複製

最终想法

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

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

如果您希望我在本教程中澄清任何內容，請隨時在評論中告訴我。

#
以上是JavaScript中正規表示式的初學者指南的詳細內容。更多資訊請關注PHP中文網其他相關文章！