26.
正規表現
正規表現とは
「文字列を一つの形式で表現するための方法」で、文字列を特殊文字パターンで検索するのに利用 例えば、メールアドレスに @ や ドメインがはいっているか、文章に特定の文字が含まれているかなどをのチェックなどです。
文章だけでは説明が難しいため例をあげて説明します。
検索する文字列の例
私はうどんが好きです
私は走るのが速いです
上記の文章は、以下のパターンにあてはまります。
私はxxxxがxxxxです
このようにパターン化した曖昧な検索ができ、マッチしたか判別して、処理をふりわけることができます。
正規表現のパターン
正規表現のパターンは「半角英数」と「特殊文字」を組み合わせて表現します。 特殊文字やパターンはすべて暗記するのは難しいのですが、ある程度法則は知る必要はあります。
特殊文字
. ^ $ [ ] * + ? | ( ) \ /
正規表現の基本一覧
| 文字 | 説明 |
|---|---|
| / ~ / | デリミタ、両端に記述することで条件範囲指定 |
| . | 任意の１文字にマッチ |
| + | 最長一致: 直前の文字が 1回以上繰り返す場合にマッチ |
| * | 最長一致: 直前の文字が 0回以上繰り返す場合にマッチ |
| ? | 最短一致: 直前の文字が 0 か 1個の場合にマッチ |
| ^ | 直後の文字が行の先頭にある場合にマッチ |
| $ | 直前の文字が行の末尾にある場合にマッチ |
| [...] | 角括弧に含まれるいずれか１文字にマッチ |
| [^...] | 角括弧に含まれる文字以外にマッチ |
| (...) | 文字を 1つのグループにまとめる |
| {n} | 直前の文字の n回繰り返し |
| {n,m} | 直前の文字の n回以上、m回以下の繰り返し |
| \d または [0-9] | すべての数字 |
| \D または [^0-9] | すべての数字以外の文字 |
| \w または [a-zA-Z_0-9] | アルファベット、アンダーバー、数字 |
| \W または [^a-zA-Z_0-9] | アルファベット、アンダーバー、数字以外の文字 |
正規表現のパターン例
アルファベットのみ
/^[a-zA-Z]*$/
半角数字のみ
/^[0-9]*$/
ふりがなのみ
/^[\u3040-\309F]+$/
URL
/^https?:\/\/([\w-]+\.)+[\w-]+(/[\w-./?%&=]*)?$/
メールアドレス
/^[a-zA-Z0-9.!#$%&’*+\/=?^_`{|}~-]+@[a-zA-Z0-9-]+(?:\.[a-zA-Z0-9-]+)*$/
日付
/^\d{4}[-\/]\d\d[-\/]\d\d$/
match() による文字検索（正規表現）
match() を利用して、文字列を正規表現パターンに一致するか判別します。
文字列.match(正規表現パターン)
アルファベット
var value = "Yokohama";
var regex = /[a-zA-Z]/g;
var matches = value.match(regex)
console.log(matches);
結果
(8) ["Y", "o", "k", "o", "h", "a", "m", "a"]
ユーザ登録フォームのチェック
氏名、ふりがな（ひらがな）をチェックしてみましょう。
- 氏名：全角文字、全角スペース
- ふりがな：ひらがな、全角スペース
HTML
HTML で氏名、ふりがなの入力項目を用意し、button タグで JavaScript を実行します。
<h2>氏名</h2>
<input type="text" id="user_name">
<p id="error_user_name"></p>
<h2>ふりがな</h2>
<input type="text" id="user_furigana">
<p id="error_user_furigana"></p>
<button onclick="regist()">登録</button>
全角文字チェック
変数 pattern に「全角文字」の正規表現のパターンを設定し、match() でチェックします。全角スペースも追加しておきます。
function checkZenkaku(value)
{
var regex = /^[^\x01-\x7E ]+$/;
var message = '';
//正規表現チェック
if (!value.match(regex)) {
message = '全角で入力してください';
}
return message;
}
ひらがなチェック
変数 pattern に「ひらがな」の正規表現のパターンを設定し、match() でチェックします。全角スペースも追加しておきます。
function checkHiragana(value)
{
var regex = /^[\u3040-\u309F ]+$/;
var message = '';
//正規表現チェック
if (!value.match(regex)) {
message = 'ひらがなで入力してください';
}
return message;
}
登録処理でデータチェック
regist() で、全角、ひらがなチェックをし、エラーの場合は HTMLにエラーメッセージを表示します。
function regist()
{
var user_name = document.getElementById('user_name').value;
document.getElementById('error_user_name').innerHTML = checkZenkaku(user_name);
var user_furigana = document.getElementById('user_furigana').value;
document.getElementById('error_user_furigana').innerHTML = checkHiragana(user_furigana);
}
演習
問題1
郵便番号を追加してチェックしてみましょう。
問題2
パスワード（8文字以上）を追加してチェックしてみましょう。
問題3
メールアドレスを追加してチェックしてみましょう。