[JavaScript] JSON データ内特定要素の文字列を正規表現でチェックする

こんにちは、広野です。

React アプリを書いていて、ユーザからの大量のインプットデータに入力ミスがないかチェックしたくなるときがあります。

そんなときに必要な JavaScript コードを書いてみましたので、紹介します。

やりたいこと
サンプルケース
サンプルコード
まとめ

やりたいこと

JavaScript で、JSON データの特定要素の文字列を正規表現でチェックしたい
指定した正規表現にマッチしない場合は、アラートを上げ処理を中断したい

サンプルケース

ものすごくシンプルなケースで試したいと思います。
以下の JSON データがユーザからのインプットとしてあったとしましょう。

[
  {"email": "user01@sample.xxx"},
  {"email": "user02@sample.xxx"},
  {"email": "user03sample.xxx"}
]

メールアドレスの書式が間違っていないか、後続処理を行う前にアプリ内でチェックしたいと思います。
3つ目のメールアドレスはエラーを起こすために意図的に @ を抜いています。

メールアドレスを表す正規表現は、以下になります。

/^[a-zA-Z0-9_+-]+(.[a-zA-Z0-9_+-]+)*@([a-zA-Z0-9][a-zA-Z0-9-]*[a-zA-Z0-9]*\.)+[a-zA-Z]{2,}$/

ユーザの入力データがこれにマッチしているか繰り返しチェックさせるために、以下のメソッドを使用します。

Array.prototype.some() - JavaScript | MDN

some() は Array インスタンスのメソッドで、指定された関数で実装されているテストに、配列の中の少なくとも 1 つの要素が合格するかどうかを判定します。配列の中で指定された関数が true を返す要素を見つけた場合は true を...

RegExp.prototype.test() - JavaScript | MDN

test() メソッドは、正規表現と指定された文字列の一致を調べるための検索を実行します。 true または false を返します。

サンプルコード

実際に書くとこんな感じになります。

変数 data に JSON データが格納されていると思ってください。

const regexpEmail = /^[a-zA-Z0-9_+-]+(.[a-zA-Z0-9_+-]+)*@([a-zA-Z0-9][a-zA-Z0-9-]*[a-zA-Z0-9]*\.)+[a-zA-Z]{2,}$/;

if (data.some((element) => regexpEmail.test(element.email) === false)) {
  alert("データに誤りがあります。");
} else {
  //後続処理
}

配列の1要素ごとに、element 変数に要素を代入して正規表現テストをかけています。
element.email がテスト対象であるメールアドレスになります。

ここでは、正規表現にマッチしないデータが1つでもあると if 文の判定が true になる仕様になっています。
サンプルケースで紹介したデータを data に入れて流すと、アラートが表示されます。