sugulogの日記

JavaScriptと正規表現!正規表現を使って簡易的な電話番号チェクを実装しよう!!

スポンサードリンク

f:id:sugulog:20210206185906p:plain
こんにちは、すぐるです!

sugulogをお読みいただきありがとうございます!!

このブログは、「 過去の無知な自分に向けてわかりやすく説明するなら?? 」を基準に書いています。

少しでもお役に立てれば幸いです。

 

今回は、JavaScript正規表現ということで

  •  正規表現を使って簡易的な電話番号チェクの実装

について簡単に解説します!!

その為このブログを読むことで、正規表現についてより理解が深まるのはもちろん、正規表現を使っての実装方法の理解も深まります。

是非最後までご愛読ください。

 

今回は、

  • testを使って正規表現を記述してみよう

  • 正規表現を使って簡易的な電話番号チェクの実装

の順で解説していきます。

では早速、みていきましょう!!

testを使って正規表現を記述してみよう

testは引数に指定した文字列がパターンにマッチするかどうかを真偽値で返すメソッドです。

以下にtestを使って正規表現を記述してみました。

どういう意味の正規表現なのか、また出力値はtrue、falseのどちらなのか考えてみましょう!!

f:id:sugulog:20210206170213p:plain

sugulog.hatenadiary.jp

①の^は直後の文字が行の先頭にある場合にマッチするので出力値はtrueです。

②の\dは数字を表しパターンにはマッチしないため出力値はfalseです。

③の\Dは数字以外を表しパターンにはマッチするため出力値はtrueです。

④の[0-9]は数字の0~9のどれかを表しパターンにはマッチしないため出力値はfalseです。

②と④の書き方は違いますが同じパターンを表しています。

それでは導入はここまでにして実装していきましょう!!

正規表現を使って簡易的な電話番号チェクの実装

まずはHTMLでフォームを作成していきます。

f:id:sugulog:20210206175410p:plain

今回は実際には送信せずalert機能を使います。

電話番号が正しく入力されている場合は入力された電話番号を表示し、正しくない場合は「正しく入力してください」という警告を出すように実装していきます。

次にJavaScriptを記述します。

f:id:sugulog:20210206181611p:plain

 送信ボタンが押された時にtelNumber関数が実行されます。

telNUumber関数ではvalueで入力値を取得し、replaceを使いハイフンがある場合は取り除いてます。

sugulog.hatenadiary.jp

 そしてif文でtestを使い条件分岐しています。

その際に正規表現の^0で先頭が0で始まること、[0-9]で0~9の数字が含まれること、{9,10}で直前の文字(0~9のどれか1つ)が9~10回繰り返されていること、$で直前の文字(0~9のどれか1つ)が行の末尾にある場合にマッチすることを定義しています。

最後に$を定義することで0~9が9~10回続いた後の文字の入力を拒否しています。

また{9,10}と合わせることで例え末尾が0~9の数字で終わったとしても8回以下または11回以上の繰り返しの場合は拒否することができます。

つまり0から始まりその後ろに0~9の数字が9~10回繰り返された値のみを受け入れる、0から始まる10~11桁の数字という条件が成り立ちます。

では実際に挙動をみていきましょう!!

f:id:sugulog:20210206184857g:plain

正規表現の条件によって処理が分岐されているのがわかりますね。

途中に文字が入った場合などもしっかりfalseとして判定されるので、実際に試してみてください!!

 

以上、今回のブログでした。

正規表現についてより理解が深まり、正規表現を使っての実装方法の理解も深まりましたか??

入力値と正規表現はよく使う組み合わせです。

正規表現ややこしいな〜って思いますが一緒に理解を深めていきましょう(^_^)/

 

最後に!!

今後も、「 過去の無知な自分に向けてわかりやすく説明するなら?? 」を基準にブログを書いていきます。

少しでも気になった方はお試しでもいいので1度、読者登録お願いします!

またTwitterでもプログラミングに関することを中心に情報を発信してます。

宜しければそちらのフォローもお願いします。

最後までご愛読いただきありがとうございました!!