読者です 読者をやめる 読者になる 読者になる

ハロトレWebデザインの勉強 | 求職者支援訓練Webサイト制作科 フェリカテクニカルアカデミー

未経験者からプロになるハロートレーニングWebデザインの勉強

正規表現

正規表現とは

  • 入力チェック処理には、正規表現が用いられます
  • 正規表現とは、文字列のパターンを特定するための手法のことです

正規表現の書き方

正規表現


/パターン/オプション

  • 数字が4桁、先頭がアルファベットなどのルールの形式を「パターン」と呼びます
  • パターンとチェック対象の文字列を照合することで、任意の形式に沿っているかどうかを調べます
  • パターン内では「直前の文字が何文字分続くか」を表現する繰り返し文字を記述できます
パターンの表現方法一覧

文字 説明
[ ] 囲まれた中のいずれか一文字と一致する
- [ ]の中に記述した場合、文字の範囲を表す
^ 文字列の先頭を意味する [ ]の先頭に記述した場合は否定の意味
$ 文字列の末尾を意味する
.

改行以外の一文字と一致する

\n 改行と一致する
| 複数の文字列のうちいずれかと一致する
{ } パターンをグループ化する グループ化するとグループ全体に対して繰り返し文字を適用できる

繰り返し文字一覧

文字 説明
? 直前の文字0文字分か1文字分と一致する
* 直前の文字が0文字以上連続する箇所と一致する
+ 直前の文字が1文字以上連続する箇所と一致する
{n} 直前の文字n文字分と一致する
{n,}

直前の文字がn文字以上連続する箇所と一致する

{n,m} 直前の文字がn文字以上、m文字以下の範囲で連続する箇所と一致する

オプション一覧

文字 説明
i 大文字と小文字を区別せずに照合する
g パターンと一致する部分文字列が複数ある場合、最初の1つだけでなくすべて検索する
m 複数行に渡る文字列に対して照合を行う場合に指定する

^は各行の先頭に、$はは各行の末尾に一致するようになる


パターンの記述例

パターン1

  • 文字列の中に abc が含まれているかどうかチェックする
/abc/


パターン2

  • 文字列の中に a または b または c が含まれているかどうかチェックする
/[abc]/


パターン3

  • 文字列の中に a〜z、A〜Zまでのいずれかの文字が含まれているかどうかチェックする
/[a-zA-Z]/


パターン4

  • 文字列の中にアルファベットが含まれていないことをチェックする
/[^a-zA-Z]/


パターン5

  • 文字列の中に abc または xyz が含まれているかどうかチェックする
/abc|xyz/


これらを組み合わせて電話番号をチェックする。

  • 利用できる文字は数字とハイフンのみ
  • 先頭は0で始まる
  • 市外局番は1〜4桁
  • 市内局番は1〜4桁
  • 加入者番号は4桁
  • ハイフンの有無は問わない


《電話番号チェックの正規表現

/^0[0-9]{1,4}-?[0-9]{1,4}-?[0-9]{4}$/

正規表現の利用


《matchメソッドの利用》

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>matchメソッドの利用</title>
<script>
  var date = '2013年3月31日';
  var result = date.match( /[0-9]+/g );
  console.log( result );
</script>
</head>
<body>
</body>
</html>

《実行結果》

  1. 日付を表す文字列の中から「1文字以上連続した数字」というパターンに一致する部分を探す
  2. オプションとして g が指定されているので、一致する部分が複数あればすべて取得します
  3. 結果、数字の部分だけ抜き出され「2013」「3」「31」が「/[0-9]+/」にマッチした3要素になります

《replaceメソッドの利用》

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>replaceメソッドの利用</title>
<script>
  var message = 'This is a pen';
  var result = message.replace( /is/g, 'at' );
  console.log( result );
</script>
</head>
<body>
</body>
</html>

《実行結果》

  • 「This is a pen」という文字列の中から「is」という文字列に一致する部分を探し、「at」に置き換えています
  • オプションの「g」が付いているので、一致する部分すべてに対して置換がおこなわれます


  • Webサイトの入力チェックは正規表現を使って行う

まとめ

  • 正規表現は、文字列の検索や置換を効率よく行うための仕組みです
  • 正規表現は、文字列オブジェクトのmatch( )メソッドやreplace( )メソッドの引数に使うことができます
  • 正規表現オブジェクトのtest( )メソッドでパターンマッチングを行うことができます