JavaScript の正規表現に関する初心者向けガイド

JavaScript を使用する人は誰でも、ある時点で文字列を扱う必要があります。文字列を別の変数に格納して渡すだけの場合もあります。また、それを検査して、特定の部分文字列が含まれているかどうかを確認する必要がある場合もあります。

ただし、物事は必ずしも簡単ではありません。場合によっては、特定の部分文字列ではなく、特定のパターンに従う一連の部分文字列を探していることがあります。

文字列内のすべての「Apples」を「apples」に置き換える必要があるとします。単純に theMainString.replace("Apples", "apples") を使用できます。良いし、簡単です。

ここで、「appLes」も「apples」に置き換える必要があると仮定します。同様に、「appLES」は「apples」になるはずです。基本的に、「Apple」の大文字と小文字のバリエーションはすべて「apple」に変更する必要があります。この場合、単純な文字列を引数として渡すことは実用的でも効率的でもありません。

ここで正規表現が登場します。大文字と小文字を区別しないフラグ i を使用するだけで済みます。このフラグを使用すると、元の文字列に「Apples」、「APPles」、「ApPlEs」、または「Apples」が含まれるかどうかは関係ありません。単語のすべてのインスタンスは「apples」に置き換えられます。

大文字と小文字を区別しないフラグと同様に、正規表現は他の多くの機能を提供しており、このチュートリアルではこれについて説明します。

JavaScript での正規表現の使用

異なる String メソッド内で正規表現を示すには、少し異なる構文を使用する必要があります。引用符で囲まれた単純な文字列とは異なり、正規表現はスラッシュで囲まれたパターンで構成されます。正規表現で使用するフラグはすべて、2 番目のスラッシュの後に追加されます。

前の例に戻り、正規表現と単純な文字列を使用した replace() メソッドは次のようになります。

リーリー

ご覧のとおり、正規表現はどちらの場合でも機能します。ここでは、正規表現内のパターンを構成するフラグと特殊文字について詳しく学習します。

正規表現におけるバックスラッシュ

通常の文字の前にバックスラッシュを追加すると、通常の文字を特殊文字に変換できます。同様に、特殊文字の前にバックスラッシュを追加することで、特殊文字を通常の文字に変換できます。

たとえば、d は特殊文字ではありません。ただし、\d は文字列内の数字と一致するために使用されます。同様に、D は特殊文字ではありませんが、文字列内の数値以外の文字と一致するために \D が使用されます。

数字には、0、1、2、3、4、5、6、7、8、9 が含まれます。正規表現で \d を使用すると、次の 9 文字のいずれかと一致します。正規表現で \D を使用すると、数値以外のすべての文字と一致します。

次の例で状況が明確になります。

リーリー

3 番目のケースでは、最初に一致した文字のみが置換されることに注意してください。フラグを使用してすべての一致を置き換えることもできます。このようなフラグについては後で学びます。

\d や \D と同様に、他の特殊文字シーケンスもあります。

1. \w を使用して、文字列内の任意の「単語」文字と一致させることができます。ここで、単語の文字とは、A ～ Z、a ～ z、0 ～ 9、および _ を指します。したがって、基本的には、すべての数字、すべての小文字と大文字、およびアンダースコアに一致します。
2. \W を使用して、文字列内の単語以外の文字と一致させることができます。 %、$、#、$ などの文字と一致します。
3. \s を使用すると、スペース、タブ、フォームフィード、改行文字などの単一の空白文字と一致します。同様に、\S を使用して、スペースを除く他のすべての文字と一致させることができます。
4. \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 中国語 Web サイトの他の関連記事を参照してください。