ホームページ > 記事 > ウェブフロントエンド > JavaScript の正規表現
まず、正規表現とは何ですか?
正規表現はカスタム ルールの式であり、定義されたルールに一致する文字列を照合するために使用されます。どのような意味です?たとえば、これは正規表現です: /d/。d は任意の数値を意味するため、この正規表現の意味は任意の数値と一致することです。あなたはおそらくそれを理解しています!
正規表現の構成を見てみましょう。
1. 直接の文字
2. 範囲クラス
とはどういう意味ですか?例: /[a-z]3{1,3}5+/ この式は、任意の英文字が 1 回現れ、次に数字の 3 が 1 ~ 3 回現れ、その後数字 5 が少なくとも 1 回現れることを意味します。
Chrome デバッグ ツールの test() メソッドを使用して試してみましょう:
注: test() メソッドは、文字列が特定の正規表現に一致するかどうかを確認し、ターゲット文字列であるパラメーターを受け取るために使用されます。一致する場合は true を返し、そうでない場合は false を返します
3. 文字クラス
これは何ですか、赤ちゃんには理解できません!例を見てみましょう: /[abc]wd{2}/、この式は、abc のいずれか 1 つに一致し、その後に単語 ([a-zA-Z0-9]) またはアンダースコアが続き、その後 2 つの数字が続くことを意味します。写真を見てください!
4. アンカー文字
ここで ^ について話しましょう。つまり、... から始めることを意味します。 例を見てみましょう:
比較のために、^
はありません。ここの式の $ 原理は ^ と同じなので、ここでは詳しく説明しません。ただし、$ は式の最後に記述する必要があります。
5. 修飾子
g 修飾子を使用しない場合、正規表現は最初の項目に一致した時点で照合を終了します。g 修飾子がある場合は、一致する項目がすべて検索されます。新しい正規表現メソッド replace() を学習します。
注: replace() メソッドは、文字列内の指定された文字を置き換えることで、2 つのパラメーターを受け取ります。最初のパラメーターは、置換することを示す正規表現です。 2 番目のパラメータは、置換する内容を示す文字列です。以下の例を参照してください。
最初の数字だけが置き換えられています。 g 修飾子を使った状況を見てみましょう。
これで、g の意味が分かりました。
i について話しましょう。i 修飾子は非常に単純で、大文字と小文字が区別されないことを示します。次の例を参照してください。
最後の m は複数行の検索を表します。たとえば、文字 a で始まる文字列を一致させたい場合、m 修飾子がある場合、改行後の a で始まる行も一致します。紙面の都合上、写真は掲載しておりません。
6. グループ化
正規表現で括弧 () を使用してグループ化を表し、それぞれの () がグループ化を表します。グループ内のコンテンツは $1、$2... で表されます。引き続き例を見てください:
たとえば、日付には次の 2 つの表現があります: 月-日-年と年/月/日、月-日を変更する方法-年から年へ /month/day はどうでしょうか?
を見てみましょう。この例では、月、日、年をグループ化し、$backreference を使用して日付形式の変換を実現します。
7. メソッド
正規表現の詳細についての説明はほぼ終了したので、正規表現で使用されるメソッドを学び始めましょう。 2 つのカテゴリがあり、1 つは正規表現オブジェクト メソッド、もう 1 つは文字列オブジェクト メソッドです。
1. 正規表現オブジェクトのメソッド
、test() と exec() が 2 つあります。 test() メソッドについて学習しました。次に、exec() メソッドについて説明します。
exec() メソッドは配列を返します。配列の最初の要素は一致したテキスト、2 番目の要素は一致したテキストの最初のサブテキスト、3 番目の要素は一致したテキストの 2 番目のサブテキストです。 ... 等々。これは非常に抽象的なので、以下の例を見て理解してください。
Exec() 呼び出しは、非グローバル呼び出しとグローバル呼び出しの 2 つの状況に分けられます。
非グローバル呼び出しの状況:
以下の例を見てください
ここでは、「a12b」が初めて一致し、次の 2 つの要素が最初のグループ「1」と 2 番目のグループであることがわかります。 .「2」。しかし、exec() メソッドが 2 回目に実行されるとき、一致は依然として「a12b」であり、これは予期せぬことです。 2 番目の一致が「c56d」であるのは当然ですが、なぜまだ「a12b」なのでしょうか?理由は lastIndex 属性にあります。 lastIndex 属性は、最後の一致結果の最後の文字の次の文字を表しますが、この属性はグローバルに呼び出された場合 (つまり、g 修飾子が式に追加された場合) にのみ有効になります。非グローバルに呼び出された場合は、常に 0 になります。 。比較のために、世界の通話状況を見てみましょう。
グローバル呼び出しの状況:
ご覧のとおり、exec() の最初の実行では「a12b」が返され、2 回目に返される lastIndex は文字列 str 内の番号 3 の位置です。 "c56d" "、lastIndex は 10 で、これは文字列 str 内の数値 7 の位置です。現時点では、lastIndex は機能するため、2 つの実行の結果が期待されます。
2. String オブジェクトのメソッド
String オブジェクトのメソッドには、search()、replace()、match()、split() があります。
1. Search() メソッド
search() メソッドは、文字列内の指定された部分文字列を取得するか、正規表現に一致する部分文字列を取得するために使用されます。一致が見つかった場合は、最初に一致した結果のインデックスが返されます。一致が見つからなかった場合は、-1 が返されます。文字列または正規表現のパラメータを受け取ります。このメソッドは、毎回文字列の先頭から照合を開始します。次の例を見てみましょう:
数値 2 を 2 回検索して返されたインデックスは 1 であり、2 番目の数値 2 のインデックス 5 ではありません。 3 番目と 4 番目の検索は正規表現で渡され、両方とも対応するインデックスを返しました。
2. replace() メソッド
この方法は以前に学んだので、ここで続けてください。いくつかの形式があります: replace(str,replaceStr)、replace(RegExp,replaceStr)、replace(RegExp,function)。最初の 2 つは比較的単純です。理解するには例を見てください:
初めて文字列を渡すときは、数値 2 を X に置き換えます。正規表現で 2 回目に渡すときは、すべての数値を置き換えます。 Xと一緒に。
replace(RegExp,function) メソッドの 2 番目のパラメーターは関数です。このメソッドは、より複雑な文字の置換に適しています。興味がある方は、ここでは紹介しません。
3. Match() メソッド
match() メソッドはパラメータ、つまり渡された正規表現に一致する文字列を検索するために使用される正規表現を渡します。配列を検索して返す場合、この配列は非グローバル呼び出しとグローバル呼び出しで異なります。これについては、後で個別に説明します。
非グローバル呼び出し:
非グローバルに呼び出された場合、返される配列は次のようになります: 最初の要素は一致したテキスト、2 番目の要素は一致したテキストの最初のサブテキスト、3 番目の要素は一致したテキストの 2 番目のサブテキスト... など。デジャブのような感じですか?はい、これは exec() メソッドとまったく同じです。
非グローバル呼び出しの場合でも、各検索は文字列の先頭から始まります。グローバル呼び出しを見てみましょう。
グローバル呼び出し:
グローバルに呼び出された場合 (つまり、正規表現に g 修飾子がある場合)、返される配列は次のようになります: 配列内の各項目は一致するテキストであり、サブテキストは存在しません。一致するテキストの。
正規表現に一致する「a12b」と「c56d」が配列に表示されます。実際、match() メソッドと exec() メソッドは同じ機能を持ちますが、一方は文字列によって呼び出され、他方は正規表現によって呼び出される点が異なります。
4. Split() メソッド
Split() メソッドは、文字列を配列に分割するために使用されます。次の例を見てください。
split() メソッドによって受け取られるパラメータは、文字列または正規表現です。例からわかるように、渡されたパラメーターはすべて文字列から削除され、配列に分割されます。