[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() メソッドは、配列の少なくとも一つの要素が、指定された関数で実装されたテストに合格するかどうかをテストします。これはブール値を返します。
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 に入れて流すと、アラートが表示されます。

まとめ

いかがでしたでしょうか?

内容は少なかったですが、地味に役立つコードなので紹介いたしました。

本記事が皆様のお役に立てれば幸いです。

著者について
広野 祐司

AWSサーバーレスアーキテクチャを駆使して社内クラウド人材育成アプリや教育コンテンツをつくっています。ReactでSPAを書き始めたら、快適すぎて他の開発言語には戻れなくなりました。AWSサーバーレスやReactの仲間を増やしたいです。
取得資格:AWS認定は7つ、ITサービスマネージャ、ITIL v3 Expert、等
2020, 2021 APN AWS Top Engineers 受賞
2022 AWS Partner Ambassador 受賞
好きなAWSサービス:AWS Amplify / Amazon Cognito / AWS Step Functions / AWS CloudFormation

広野 祐司をフォローする
クラウドに強いによるエンジニアブログです。
SCSKは専門性と豊富な実績を活かしたクラウドサービス USiZE(ユーサイズ)を提供しています。
USiZEサービスサイトでは、お客様のDX推進をワンストップで支援するサービスの詳細や導入事例を紹介しています。
その他技術ナレッジ
TechHarmony
タイトルとURLをコピーしました