Fulfledge

データの道具箱

INPUT · スライド

文字のパターンを調べる

01 / 05

文字の形を確かめたい

フォームの入力欄で、「郵便番号は数字3桁-数字4桁」「半角英数字だけ」「空っぽではない」といったチェック（入力検証）をしたい場面が必ずある。

これを if や for で 1 文字ずつ調べていくと大変だ。そこで使うのが、文字の並びのパターンを表す道具「正規表現（RegExp）」だよ。

02 / 05

パターンを / で囲む

正規表現は、/パターン/ のようにスラッシュで囲んで書く。

代表的な記号を見てみよう。

  • ^: 文字列の先頭
  • $: 文字列の末尾
  • \d: 半角数字（0〜9）のどれか1文字
  • +: 直前の文字が 1文字以上続く

たとえば /^\d+$/ は、「先頭から末尾まで全部数字で、1文字以上ある」という意味になるよ。

const pattern = /^\d+$/;console.log(pattern.test("12345"));console.log(pattern.test("12a45"));

実行結果

true
false

03 / 05

あてはまるか確かめる test

正規表現の .test(文字列) メソッドを呼ぶと、パターンにあてはまるなら true、あてはまらないなら false を返す。

結果が真偽値なので、if 文の条件にそのまま使えるのが一番の強みだね。

const isNumber = /^\d+$/;const input = "980";if (isNumber.test(input)) {  console.log("数字です");}

実行結果

数字です

04 / 05

文字の種類と長さを決める

文字の種類や長さも指定できるよ。

  • [a-z]: 半角小文字のアルファベットどれか1つ
  • [A-Z]: 半角大文字
  • {3}: ちょうど3文字
  • {3,8}: 3文字以上8文字以下

たとえば /^\d{3}-\d{4}$/ は、日本の郵便番号の形そのものだね。

const zipPattern = /^\d{3}-\d{4}$/;console.log(zipPattern.test("123-4567"));console.log(zipPattern.test("1234567"));

実行結果

true
false

05 / 05

まとめて確かめよう

ここまでを整理しておこう。

  • /パターン/ で正規表現を作る
  • ^ は先頭、$ は末尾
  • \d は数字、[a-z] は小文字英字
  • + は1文字以上、{n} はn文字
  • .test(文字列) で合致するか真偽値を返す

それじゃあ、入力チェックの練習をしてみよう。