フロントエンドの基礎 - JavaScriptの正規表現を詳しく解説

1.コンセプト：

正規表現 (正規表現) は、一連の文字列特性を記述するために使用されるパターンであり、特定の文字列と一致させるために使用できます。
本質はルール文字列であり、ルールを定式化するために指定された記号で記述されます。

2. アプリケーションシナリオ:

検証: フォームデータの正当性の検証。
検索: 大量の文字列データから指定した内容を素早く抽出します。
置換：大量の文字列データから指定した内容を素早く抽出して置換します。

3. 正規表現の作成方法:

方法 1:
- var 正则变量名称=new RegExp('正则表达式');
- エスケープ文字を使用するには、\次の 2 つの文字が必要です。\\
- ```
var telReg=new RegExp('^1[3-9]\\d{9}$');
```
方法 2: (一般的に使用される)
- var 正则变量名称=/正则表达式/
- エスケープ文字は\1 つだけ必要です\
- ```
var telReg=/^1[3-9]\d{9}$/;
```

4. 文法

文字クラス
- .
  - 任意の 1 文字と一致します。
- []
  - 角括弧内の任意の文字と一致します。
  - [abc]: a、b、c のいずれかの文字を取得します。
- -
  - 角括弧内に文字範囲を示します。
  - [a-zA-Z]: 任意の大文字または小文字を入力します。
  - [a-zA-Z0-9]: 任意の数字または文字を入力します。
- ^
  - 角括弧内は、角括弧内の文字を除く任意の文字を意味します。
  - [^a-zA-Z]: 文字以外の任意の文字を取得します。
数量修飾子
- ?
  - 直前のユニットは 0 回または 1 回一致します。
  - [a-z]?: 小文字が 0 回または 1 回出現します。
- +
  - 直前のユニットと 1 回以上一致します。
  - [a-z]+: 小文字が 1 つ以上出現します。
- *
  - 直前のユニットと何度でも一致します。
  - [a-z]*: 小文字の出現。
- {N}
  - 直前のユニットは N 回一致します。
  - [a-z]{2}: 小文字が 2 回出現します。
- {N,}
  - 直前のユニットは少なくとも N 回一致します。
  - [a-z]{2,}: 小文字が 2 回以上出現します。
- {0,M}
  - 直前の要素は最大 M 回一致します。
  - [a-z]{,2}: 小文字は最大 2 回出現します。
- {N,M}
  - 直前のユニットは少なくとも N 回、最大で M 回一致します。
  - [a-z]{6,12}: 小文字が 6 回以上、最大 12 回出現します。
位置修飾子
- ^:
  - 行の先頭と一致します。
  - ^1: 1から始めます。
  - ^[a-z]: 小文字で始まります。
- $:
  - 行末の位置と一致します。
  - [a-z]$: 小文字で終わります。
定義済みのシンボル
- \w:
  - 数字、文字、アンダースコアのいずれか。に相当します[a-zA-Z0-9_]。
- \W:
  - 数字、文字、アンダースコアを除く任意の文字。に相当します[^a-zA-Z0-9_]。
- \d:
  - 任意の 1 つの数字。に相当します[0-9]。
- \D:
  - 数字以外の任意の 1 文字。に相当します[^0-9]。
- \s:
  - 任意の 1 つの空白文字 (スペースと改行) と一致します。
- \S:
  - 任意の 1 つの非空白文字 (スペースと改行) と一致します。
特殊記号
- ()
  - 括弧内の内容を 1 つの単位 (全体) として扱います。
  - \.(com|cn|org)$: .com、.cnまたはで終わります.org。
- |
  - またはを意味します。
- \
  - エスケープ文字は、\右側の文字をエスケープします。右側の文字が特別な意味を持つ場合 (通常の文字)、エスケープ後は特別な意味を持たなくなります (通常の文字)。

よく使用される 5 つの関数:

test()
- 指定された文字列が現在の正規表現ルールを満たしているかどうかを判断し、満たしている場合は true を返し、そうでない場合は false を返します。
- ```
var reg=/^\.(com|cn|org)$/;
var str=prompt('请输入:');
console.log(reg.test(str));
```

6. 文字列の正規表現に関するよく使われる関数

マッチ（）
- 指定された正規表現に一致する現在の文字列内の値を取得するために使用されます。
- パラメータ
  - 対象の正規表現。
- 戻り値
  - 目的のキャラクターが見つかった結果。
  - ```
  var str='12ab34cd56ef78gh999';
  var reg=/[0-9]+/g;
  console.log(str.match(reg));//['12','34','56','78','999']
```
交換（）
- 指定された正規表現に一致する現在の文字列内の値を、指定された値に置き換えます。
- パラメータ
  - 対象の正規表現。
- 戻り値
  - 置換後の文字列結果。
  - ```
  var str='123abc456efg789';
  var reg=/[0-9]/g;
  console.log(str.replace(reg,'*'));//***abc***efg***
```
スプリット（）
- 指定された正規表現に一致する現在の文字列内の値を区切り文字として分割し、部分文字列の配列を形成します。
- パラメータ
  - 対象の正規表現。
- 戻り値
  - 切り取られた部分文字列の配列。
  - ```
  var str='123abc456efg';
  var reg=/[0-9]+/;
  console.log(str.split(reg));//['','abc','efg']
```

セブン、マッチングモード

分類
- u: 最初の部分文字列の結果のみに一致します。デフォルトモード。
- g: グローバル一致モード、すべての部分文字列を一致させます。
- i: 大文字小文字モードを無視します。
使用
- 方法 1:
  - var 正则变量名称=new RegExp('正则表达式','模式');
  - ```
  var telReg=new RegExp('[a-z]','ig');
```
- 方法 2: (一般的に使用される)
  - var 正则变量名称=/正则表达式/模式
  - ```
  var telReg=/[a-z]/ig;
```

フロントエンドの基礎 - JavaScriptの正規表現を詳しく解説

おすすめ