JavaScript 正規表現の説明

JavaScript 正規表現の説明

1. 正規表現の作成

JavaScript には正規表現を作成する方法が 2 つあります。

  • 最初の方法: 正規表現で直接記述する
  • 2番目の方法: new RegExp('regular expression') を通じて RegExp オブジェクトを作成します。
定数 re1 = /ABC\-001/;
const re2 = 新しい正規表現('ABC\\-001');
re1; // /ABC\-001/
re2; // /ABC\-001/

2 番目の書き方を使用する場合、文字列エスケープの問題により、文字列内の 2 つの \ は実際には 1 つの \ になることに注意してください。

2. 使用モード

2.1 シンプルモードの使用

単純なパターンは、見つかった直接一致で構成されます。たとえば、パターン /abc/ は、文字列内で同時にその順序で出現する文字 'abc' のみに一致します。これは、「こんにちは、ABC を知っていますか?」や「最新の飛行機の設計はスラブクラフトから進化しました。」に一致します。上記の両方の例では、部分文字列「abc」が一致します。 「Grab crab」という文字列には「abc」という部分文字列が含まれていないため、一致しません。

2.2 特殊文字の使用

たとえば、パターン /abc/ は、1 つの「a」に続いて 0 個以上の「b」(前の項目が 0 回以上出現することを意味します)が続き、その後に「c」の任意の文字の組み合わせが続くものに一致します。文字列「s'scbbabbbbcdebc」では、このパターンは部分文字列「abbbbc」と一致します。

キャラクター意味
\マッチングは以下のルールに従います:
特殊文字でない文字の前のバックスラッシュは、次の文字が特殊文字であり、文字どおりに解釈されないことを示します。たとえば、前に '' が付いていない 'd' は通常、小文字の 'd' と一致します。 '' が追加されると、この文字は特殊文字になり、数字に一致することを意味します。
バックスラッシュは、リテラル内のその後に続く特殊文字をエスケープするためにも使用できます。たとえば、パターン /a/ は 0 個以上の a に一致します。対照的に、パターン /a*/ は '' の特殊性を削除するため、「a*」のような文字列と一致します。
new RegExp("pattern") を使用する場合は、\ も文字列内のエスケープ文字であるため、\ をエスケープすることを忘れないでください。
^入力の先頭と一致します。たとえば、/^A/ は「an A」の「A」とは一致しませんが、「An E」の「A」とは一致します。
$入力の末尾に一致します。たとえば、/t$/ は「eater」の「t」には一致しませんが、「eat」の「t」には一致します。
*前の表現と 0 回以上一致します。 {0,} と同等です。たとえば、/bo*/ は「A ghost boooooed」の「booooo」に一致します。
+前の表現と 1 回以上一致します。 {1,} と同等です。たとえば、/a+/ は「candy」の「a」と「caaaaaandy」のすべての「a」に一致します。
?前の表現と 0 回または 1 回一致します。 {0,1} と同等です。たとえば、/e?le?/ は、「angel」の「el」、「angle」の「le」、および「oslo」の「l」に一致します。
量指定子 *、+、?、または {} のいずれかの後に続く場合、量指定子はデフォルトの貪欲モード (できるだけ多くの文字に一致) ではなく、非貪欲モード (できるだけ少ない文字に一致) になります。
たとえば、/\d+/ を "123abc" に適用すると "123" が返されますが、/\d+?/ を使用すると "1" のみに一致します。
改行を除く任意の 1 文字に一致します。たとえば、/.n/ は「nay, an apple is on the tree」の「an」と「on」には一致しますが、「nay」には一致しません。
xええ
{n} n は正の整数で、前の文字と正確に n 回一致します。
たとえば、/a{2}/ は「candy」の「a」には一致しませんが、「caandy」のすべての a と「caaandy」の最初の 2 つの「a」には一致します。
{n,m} n と m は両方とも整数です。直前の文字と少なくとも n 回、最大で m 回一致します。 n または m の値が 0 の場合、この値は無視されます。たとえば、/a{1, 3}/ は「cndy」のどの文字とも一致しませんが、「candy」の a、「caandy」の最初の 2 つの a、「caaaaaandy」の最初の 3 つの a と一致します。 「caaaaaandy」を一致させる場合、元の文字列に a がさらに多く含まれていたとしても、一致した値は「aaa」になることに注意してください。
[xyz]文字のコレクション。エスケープ シーケンスを含む、角括弧内の任意の文字と一致します。ダッシュ (-) を使用して文字の範囲を指定できます。ドット (.) やアスタリスク (*) などの特殊文字は、文字セットでは特別な意味を持ちません。エスケープする必要はありませんが、エスケープすると機能します。
たとえば、[abcd]と[ad]は同じです。どちらも「brisket」の「b」と「city」の「c」に一致します。 /[az.]+/ と /[\w.]+/ は文字列 "test.i.ng" に一致します。
[^xyz]逆文字セット。つまり、角括弧で囲まれていない任意の文字に一致します。ダッシュ (-) を使用して文字の範囲を指定できます。ここでは通常の文字であればどれでも使えます。
\b単語の境界に一致します。単語境界とは、単語の後に別の「字」文字が続かない位置、またはその前に別の「字」文字が存在しない位置です。一致した単語境界は一致したコンテンツに含まれないことに注意してください。つまり、一致した単語境界のコンテンツの長さは 0 です。例えば:
/\bm/ は「moon」の「m」に一致します。/oo\b/ は「moon」の「oo」には一致しません。「oo」の後に「単語」文字「n」が続くためです。 /oon\b/ は、「oon」が文字列の末尾であるため、「moon」の「oon」に一致します。こうすることで、その後に「字」文字が続かなくなります。
\d数字と一致します。 [0-9]に相当します。たとえば、/\d/ または /[0-9]/ は、「B2 はスイート番号です。」の「2」に一致します。
\D数字以外の文字に一致します。 [^0-9]と同等です。たとえば、/\D/ または /[^0-9]/ は、「B2 はスイート番号です。」の「B」に一致します。
\fフォームフィード文字 (U+000C) に一致します。
\n改行文字 (U+000A) に一致します。
\r復帰文字 (U+000D) と一致します。
\sスペース、タブ、フォーム フィード、改行などの空白文字に一致します。 [\f\n\r\t\v\u00a0\u1680\u180e\u2000-\u200a\u2028\u2029\u202f\u205f\u3000\ufeff] と同等です。
たとえば、/\s\w*/ は「foo bar.」の「bar」に一致します。
\S空白以外の文字に一致します。 [^ \f\n\r\t\v\u00a0\u1680\u180e\u2000-\u200a\u2028\u2029\u202f\u205f\u3000\ufeff] と同等です。
たとえば、/\S\w*/ は「foo bar.」の「foo」に一致します。
\t水平タブ文字 (U+0009) に一致します。
\w 1 つの文字 (文字、数字、またはアンダースコア) と一致します。 [A-Za-z0-9_]に相当します。
たとえば、/\w/ は「apple」の「a」、 「$5.28」の「5」、 「3D」の「3」に一致します。
\W単語に含まれない文字と一致します。
\n正規表現では、最後の n 番目のサブキャプチャに一致するサブ文字列を返します (キャプチャの数は左括弧の後にカウントされます)。

3. 応用

3.1 文字列の分割

正規表現を使用して文字列を分割すると、固定文字を使用するよりも柔軟になります。通常の分割コードは次のとおりです。

'ad c'.split(' '); // ['a', 'd', '', '', 'c']

上記の方法では連続するスペースを認識できないため、代わりに正規表現を使用します。

'ab c'.split(/\s+/); // ['a', 'b', 'c']

スペースがいくつあっても、文字列は正常に分割できます。次に「,」を追加します。

'a,b, c d'.split(/[\s\,]+/); // ['a', 'b', 'c', 'd']

次に以下を追加します:

'a,b;; c d'.split(/[\s\,\;]+/); // ['a', 'b', 'c', 'd']

したがって、正規表現を使用して、不規則な入力を正しい配列に変換できます。

3.2 グループ化

正規表現では、一致があるかどうかを判断するだけでなく、部分文字列を抽出することもできます。() で表される部分文字列が抽出されるグループです。例えば:

^(\d{4})-(\d{4,9})$ はそれぞれ 2 つのグループを定義し、一致した文字列から市外局番と市内番号を直接抽出できます。

var re = /^(\d{4})-(\d{4,9})$/;
re.exec('0530-12306'); // ['010-12345', '010', '12345']
re.exec('0530 12306'); // ヌル

一致が成功すると、exec() メソッドは配列を返します。最初の要素は正規表現に一致した文字列全体であり、後続の文字列は一致が成功した部分文字列を表します。

一致が失敗した場合、exec() メソッドは null を返します。

3.3 貪欲マッチング

正規表現のマッチングはデフォルトでは貪欲であり、つまり可能な限り多くの文字と一致することに注意してください。次のように、数字の後の 0 を一致させます。

var re = /^(\d+)(0*)$/;
re.exec('102300'); // ['102300', '102300', '']

\d+ は貪欲な一致を使用するため、後続のすべての 0 と直接一致し、0* は空の文字列とのみ一致します。

次の 0 と一致させるには、\d+ で非貪欲な一致 (つまり、できるだけ少ない一致) を使用するようにする必要があります。? を追加すると、\d+ で非貪欲な一致が使用されるようになります。

var re = /^(\d+?)(0*)$/;
re.exec('102300'); // ['102300', '1023', '00']

3.4 正規表現フラグ

g グローバル検索。
i 大文字と小文字を区別しない検索。
m 複数行検索。
y ターゲット文字列の現在の位置から一致を開始する「スティッキー」検索を実行します。 y フラグを使用できます。

3.5 test() メソッド

test() メソッドは、文字列がパターンに一致するかどうかを確認するために使用されます。文字列に一致するテキストが含まれている場合は true を返し、含まれていない場合は false を返します。

var re = /^(\d{4})-(\d{4,9})$/;
re.test('0530-12321'); // 真
re.test('0530-123ab'); // 偽
re.test('0530 12321'); // 偽

4. よく使われる正規表現(参考)

メールアドレスを確認してください: ^\w+[-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$
ID 番号を確認してください (15 桁または 18 桁): ^\d{15}|\d{}18$
中国本土の携帯電話番号: 1\d{10}
中国本土の固定電話番号: (\d{4}-|\d{3}-)?(\d{8}|\d{7})
中国本土郵便番号: [1-9]\d{5}
IPアドレス: ((2[0-4]\d|25[0-5]|[01]?\d\d?)\.){3}(2[0-4]\d|25[0-5]|[01]?\d\d?)
日付 (年-月-日): (\d{4}|\d{2})-((1[0-2])|(0?[1-9]))-(([12][0-9])|(3[01])|(0?[1-9]))
日付(月/日/年):((1[0-2])|(0?[1-9]))/(([12][0-9])|(3[01])|(0?[1-9]))/(\d{4}|\d{2})
番号を確認してください: ^[0-9]*$
n桁の数字を検証: ^\d{n}$
少なくとも n 桁の数字が存在することを確認します: ^\d{n,}$
mn桁の数を確認します: ^\d{m,n}$
数字がゼロで始まっているか、ゼロ以外で始まっているかを確認します: ^(0|[1-9][0-9]*)$
正の実数に小数点以下 1 ~ 3 桁があることを確認します: ^[0-9]+(.[0-9]{1,3})?$
ゼロ以外の正の整数を検証します: ^\+?[1-9][0-9]*$
整数がゼロでないことを確認します: ^\-[1-9][0-9]*$
負でない整数(正の整数 + 0)を検証する ^\d+$
非正整数(負の整数 + 0)^((-\d+)|(0+))$ を検証します
文字の長さが 3 であることを確認します: ^.{3}$
26文字の英語の文字列を検証します: ^[A-Za-z]+$
26 個の大文字の英語の文字で構成される文字列を検証します: ^[AZ]+$
26 個の小文字の英語文字で構成される文字列を検証します: ^[az]+$
数字と26文字の英語の文字で構成される文字列を検証します: ^[A-Za-z0-9]+$

要約する

この記事はこれで終わりです。皆さんのお役に立てれば幸いです。また、123WORDPRESS.COM のその他のコンテンツにも注目していただければ幸いです。

以下もご興味があるかもしれません:
  • JavaScript 正規表現における括弧の落とし穴の一覧
  • JS で tofixed と round を使用してデータの丸めを処理する場合の違い
  • JS はデータの丸め処理を行います (tofixed と round の違いの詳細な説明)
  • JavaScript で toFixed() 丸めを使用する方法の詳細な説明
  • js 正規表現の簡単な検証方法
  • jsは正規表現を使用して年、月、日の例をフィルタリングします
  • JS の toFixed() メソッドの丸め精度の問題の詳細な説明
  • jmeter でインターフェース関連付けを実装する 2 つの方法 (正規表現抽出器と json 抽出器)
  • nest.js で正規表現を使用して検証を正しく設定する方法
  • jJavaScript における toFixed() と正規表現の落とし穴

<<:  HTML いくつかの特別な分割線効果

>>:  Dockerを使用してOracle_11gをインストールする方法

推薦する

WindowsシステムでPhPStudy MySQLの起動に失敗する問題を解決する

エラーを報告するApache\Nginx サービスは正常に起動しましたが、MySQL は起動に失敗し...

JS で CSS 変数を使用する方法

JS で CSS 変数を使用する方法:export キーワードを使用して、js オブジェクトを le...

Dockerコンテナを使用してプロキシ転送とデータバックアップを実装する方法

序文アプリケーションを Docker コンテナとしてサーバーにデプロイする場合、通常はネットワークと...

Reactにおけるキーの役割の詳細な説明

目次質問: ボタンをクリックすると、スパンの色が赤に変わりますか?上記の問題を分析します。 2番目の...

ウェブサイトを高速化する

パフォーマンスは本当に重要ですか?パフォーマンスは重要であり、誰もがそれを知っています。なぜ私たちは...

ページデザインにおけるテーブルとdivの適切な適用についての簡単な説明

この記事の冒頭で、以前書いた入門記事の間違いを訂正したいと思います。初心者を再び誤解させないように、...

Vueページジャンプの実装方法

1. this.$router.push() 1. ビュー <テンプレート> <d...

2012年のベストWebデザイン作品レビュー[パート1]

新年の初めに、友人の健康と2013年が素晴らしい年となることを心からお祈りいたします。この記事では、...

Vue 手書き読み込みアニメーション プロジェクト

ページが応答しない場合、白い画面が表示されないように、読み込みアニメーションを表示するのがユーザーフ...

CentOS に Redis と MySQL をインストールする

1|0MySQL(MariaDB) 1|11. 説明MariaDB データベース管理システムは My...

面接では、select...for update がテーブルをロックするのか、それとも行をロックするのか尋ねられました。

目次確認する:例の検証と組み合わせるselect クエリ ステートメントはロックされませんが、sel...

AWS無料サーバーアプリケーションとネットワークプロキシ設定チュートリアルの詳細な説明

目次予防必要条件AWSアカウントを申請する仮想マシンの申請と有効化仮想マシンを申請するセキュリティグ...

MYSQL接続ポートが占有され、ファイルパスエラーが発生する問題を解決します

今朝、私は Wampserver を使用してローカルの win7 マシン上に PHP 環境を構築し、...

Dockerfile を使用して Node.js サービスをデプロイする方法

Dockerfileを初期化するプロジェクトの名前が express であると仮定して、expres...

Macシステムをインストールした後にVMWareがフルスクリーンで表示できない問題を解決する

システム: VMTOOLs ダウンロード:リンク: https://pan.baidu.com/s/...