JavaScript での正規表現の使用について詳しく学ぶ

1. 正規表現とは何か

文字列内の文字の組み合わせを一致させるために使用されるパターンです。 JavaScript では、正規表現もオブジェクトです。

正規表現は通常、検証フォームなどの特定のパターン (ルール) に一致するテキストを取得して置換するために使用されます。ユーザー名フォームでは英語の文字、数字、またはアンダースコアのみを入力できますが、ニックネーム入力ボックスでは中国語の文字 (一致) を入力できます。さらに、正規表現は、ページコンテンツ内の一部の機密単語を除外する (置換) ため、または文字列から必要な特定の部分を取得する (抽出) ためによく使用されます。

1. 正規表現の特徴

正規表現の柔軟性。

非常に論理的かつ機能的です。

複雑な弦の制御を迅速かつ非常に簡単な方法で実現できます。

2. 正規表現の使用

1. 正規表現を作成する

通常、作成方法は 2 つあります。

1) RegExpオブジェクトのコンストラクタを呼び出して作成する

var 変数名 = new RegExp(/式/);

2) 文字通りに創造する

 var 変数名 = /式/;

// コメントの途中に式を置くのは、通常のリテラルです

2. 正規表現をテストする

test() 正規表現オブジェクトメソッド。文字列が規則に準拠しているかどうかを検出するために使用されます。オブジェクトは true または false を返し、そのパラメーターはテスト文字列です。

regexObj.test(文字列)

で：

regexObj — 書き込む正規表現

str — テストするテキスト

これは、str テキストが記述された正規表現仕様に準拠しているかどうかを確認することを意味します。

例えば：

正規表現var rg = /123/が与えられた場合、入力した文字列がルールを満たしているかどうかを判断します。

var str = '123'
var reg1 = 新しい正規表現(/123/);
var reg2 = /abc/;
コンソールにログ出力します。 
console.log(reg2.test(str));

印刷結果は以下のとおりです。

2. 正規表現における特殊文字

1. 正規表現の構成

正規表現は、/abc/ などの単純な文字、または /ab*c/ などの単純な文字と特殊文字の組み合わせで構成できます。特殊文字はメタ文字とも呼ばれ、^、$、+ など、正規表現で特別な意味を持つ特殊記号です。

2. 境界文字

正規表現における境界文字（位置文字）は、文字の位置を示すために使用されます。主に 2 つの文字があります。

境界文字	例示する
^	行頭のテキストに一致します
$	行末のテキストに一致します

^ と $ が一緒に使用されている場合は、完全一致が必要であることを意味します。

3. キャラクタークラス

文字クラスは、選択できる文字の範囲があり、そのうちの 1 つだけを一致させる必要があることを示します。すべてのオプション文字は角括弧で囲まれます。

1. [] 角括弧

/[abc]/.test('andy') // 真

後続の文字列に abc のいずれかの文字が含まれている限り、true が返されます。

2. [-] 角括弧内の範囲記号 -

/^[az]$/.test(c') // 真

角括弧内に - を追加すると範囲が示され、ここでは a から z までの 26 文字すべての英語が許容されることを意味します。

3. [^] 角括弧内の否定記号 ^

  /[^abc]/.test('andy') // 偽

角括弧内に ^ を追加すると否定を意味します。角括弧内の文字が含まれている限り、false が返されます。

^ と、角括弧の外側に記述される境界文字との違いに注意してください。

4. 文字の組み合わせ

/[a-z1-9]/.test('andy') // 真

角括弧内では文字の組み合わせを使用できます。つまり、a から z までの 26 文字すべての英語の文字と 1 から 9 までの数字が許可されます。

4. 数量詞

量指定子は、パターンが出現する回数を設定するために使用されます。

数量詞	例示する
*	0回以上繰り返す
+	1回以上繰り返す
?	0回または1回繰り返す
{n}	n回繰り返す
{n,}	n回以上繰り返す
{n,m}	n～m回繰り返す

var reg = /^a*$/; // * は >=0 と同等で、0 回または複数回出現できます。var reg = /^a+$/; // + は >=1 と同等で、1 回または複数回出現できます。var reg = /^a?$/; // ? は 1||0 と同等で、0 回または 1 回出現できます。var reg = /^a{3}$/; // {3} は文字 a を 3 回繰り返すことを意味します。var reg = /^a{3,}$/; // {3,} は文字 a を 3 回以上繰り返すことを意味します。var reg = /^a{3,16}$/; // {3,16} は文字 a を 3 回以上 16 回以下繰り返すことを意味します

たとえば、ユーザー名の検証ケースを実行してみましょう。ユーザー名の入力が正当な場合、プロンプトメッセージは「ユーザー名は正当です。色は緑です」となり、ユーザー名の入力が不正な場合、プロンプトメッセージは「ユーザー名は不正です。色は緑です」となります。

コードは次のとおりです。

<!DOCTYPE html>
<html lang="ja">
<ヘッド>
    <メタ文字セット="UTF-8">
    <meta http-equiv="X-UA-compatible" content="IE=edge">
    <meta name="viewport" content="width=デバイス幅、初期スケール=1.0">
    <title>ドキュメント</title>
    <script src="jquery.js"></script>
    <スタイル>
        。成功{
            色：緑;
        }
        。間違っている{
            色：赤;
        }
    </スタイル>
</head>
<本文>
    ユーザー名:
        <input type="text" class="uname"><span></span>
    </ラベル>
    <スクリプト>
       $(関数(){
        var reg = /^[a-zA-Z0-9_-]{6,16}$/;
        $('.uname').bind('blur',function(){
            str = $(this).val(); とします。
            if($('input').val === null){
                $('span').removeClass();
            }
            if(reg.test(str)){
                if($('span').hasClass('wrong'))
               $('span').removeClass()
                $('span').html('入力形式は正しいです');
                $('span').addClass('成功')
            }それ以外{
                $('span').html('入力形式エラー');
                $('span').addClass('間違っています')
            }
        })
       })

    </スクリプト>
</本文>
</html>

表示効果は次のとおりです。

5. 括弧内の要約

中括弧は量指定子として使用され、繰り返し回数を示します。

括弧文字のセット。角括弧内の任意の文字と一致します。

括弧は優先順位を示す

6. 定義済みクラス

定義済みクラスは、いくつかの一般的なパターンの省略形です。

3. Stringクラスのメソッド

1. match() メソッド

match() メソッド: 正規表現に従って要件を満たすすべてのコンテンツを照合し、一致が成功したら配列に保存します。一致が失敗した場合は false が返されます。

例えば：

var str = "これは it is の省略形です";
var reg1 = /it/gi;
str.match(reg1); // 一致する結果: (2) ["It", "it"]
var reg2 = /^it/gi;	
str.match(reg2); // 一致結果: ["It"]
var reg3 = /s/gi;	
str.match(reg3); // 一致する結果: (4) ["s", "s", "s", "s"]
var reg4 = /s$/gi;
str.match(reg4); // 一致する結果: ["s"]

2. search() メソッド

search() メソッド: search() メソッドは、指定されたパターンの部分文字列が文字列内で最初に出現する位置を返すことができます。これは indexOf() メソッドよりも強力です。

例えば：

var str = '123*abc.456';
console.log(str.search('.*')); // 出力: 0
console.log(str.search(/[\.\*]/)); // 出力: 3

3. split() メソッド

split() メソッド: split() メソッドは、指定された区切り文字に従って文字列を文字列配列に分割するために使用されます。分割された文字列配列には区切り文字は含まれません。

例えば：

文字列は「@」と「.」の区切り文字に従って分割されます。

var str = '[email protected]';
var reg = /[@\.]/;
var split_res = str.split(reg);
console.log(split_res); // 出力: (3) ["test", "123", "com"]

正規表現マッチングを使用して文字列を分割する場合、文字列を分割する回数も指定できます。

var str = '私たちは家族です';
var reg = /\s/;
var split_res = str.split(reg, 2);
console.log(split_res); // 出力: (2) ["We", "are"]

4. replace() メソッド

replace() メソッド: replace() メソッドは文字列を置換するために使用されます。操作に使用されるパラメータは文字列または正規表現です。

たとえば、敏感な単語を検索して置換するケースを記述します (中国語の文字と「bad」という単語をフィルターします)。

<!DOCTYPE html>
<html lang="ja">
<ヘッド>
    <メタ文字セット="UTF-8">
    <meta http-equiv="X-UA-compatible" content="IE=edge">
    <meta name="viewport" content="width=デバイス幅、初期スケール=1.0">
    <title>ドキュメント</title>
</head>
<body style="display:flex">
    <div>
        <p>フィルタリング前のコンテンツ</p>
        <テキストエリア名="" id="" 列数="30" 行数="10"></テキストエリア>
        <button id = 'btn'>フィルター</button>
    </div>
    <div>
        <p>フィルタリングされたコンテンツ</p>
        <テキストエリア名="" id="" 列数="30" 行数="10"></テキストエリア>
    </div>
    <スクリプト>
        var テキスト = document.querySelectorAll('textarea');
        console.log(テキスト);
        var btn = document.querySelector('ボタン');
        btn.onclick = 関数() {
            text[1].value = text[0].value.replace(/(bad)|[\u4e00-\u9fa5]/gi, '*');
        }
    </スクリプト>
</本文>
</html>

実行効果は次のとおりです。