本記事では正規表現をJavaScriptで使う方法について解説します。
正規表現は多くのプログラミング言語で使えるものであり、JavaScriptでももちろん使えます。
正規表現を使うことで、複雑な文字列処理を一行で書くことができ、ソースコードがすっきりします。
実際の開発現場でも正規表現は多く使われるので書き方を覚えた方が良いでしょう。
本記事では正規表現の基本的な書き方や、各メソッドの使い方について解説します。
JavaScriptの正規表現とは？
正規表現とは、文字列の集合を1つの文字列(パターン)で表現する方法のことです。
文字列を特定パターンで表現することで、そのパターンに合致するかの判定を行ったり、そのパターンに合うように文字列を整形したりできます。
JavaScriptで正規表現を使う場合、RegExpというオブジェクトを使います。
RegExpには正規表現で文字列チェックなどを行えるメソッドが入っています。
正規表現を使うことで、たとえばフォームに入力された電話番号やメールアドレスが、正しい形式となっているかチェックすることが可能です。
電話番号が10桁の数値になっていなかったり、メールアドレスに「@」が入っていなかったりする場合は、「エラー文」を出せますね。
このように、JavaScriptで正規表現を使う場面は多くあるでしょう。
なお、正規表現以外の文字列整形方法を知りたい場合は【初級編2】JavaScriptのreplaceで文字列の置換を行おうや 【初級編3】JavaScriptのjoinで文字列結合を行おうをお読みください。
正規表現の記号について
正規表現には特定パターンを表現するために、いくつかの記号を使います。
これらの記号を「メタ文字」と呼びます。
今回はメタ文字の中でも、よく使うものをもまとめました。
| メタ文字 | 意味 | 使用例 | 使用例に合致する文字列例 |
|---|---|---|---|
| . | 任意の文字 | 1.2 | 112,122,132 |
| ^ | 文字列の先頭 | ^aaa | taa,maa,Eaa |
| $ | 文字列の末尾 | aaa$ | aat,aam,aaE |
| * | 0回以上繰り返す | ac* | a,ac,acc,accc |
| + | 1回以上繰り返す | ac+ | ac,acc,accc |
これらの記号は最低限覚えておくと、正規表現をスムーズに書けて便利でしょう。
正規表現の使い方
正規表現の具体的な使い方を紹介します。
RegExpオブジェクトには代表的な次の3つのメソッドがあります。
- testメソッド
- matchメソッド
- searchメソッド
これらのメソッドを使いこなすことで、JavaScriptで正規表現が扱えるようになります。
1つ1つの使い方を詳しくみていきましょう。
testメソッド
testメソッドとは、正規表現に合致するかどうかを判断するものです。
三種類のメソッドの中で使い方は最も単純です。
○コード例
<!DOCTYPE html> <head> <title>テスト画面</title> </head> <body> <script> var regexp = new RegExp(/^\d{3}-\d{4}-\d{4}$/); var result = regexp.test("111-1111-1111"); document.write(result) </script> </body> </html>○実行結果
まずRegExpオブジェクトを使う必要があります。
RegExpオブジェクトは引数に正規表現を指定する必要があります。
正規表現を指定する場合、「/」で囲むのがルールになっています。
上記のコードでは、数字が電話番号の形式に一致しているかを判定しています。
testメソッドを使う場合は、引数の判定したい文字列を指定します。
今回は形式に一致しているので「true」と表示がされましたね。
matchメソッド
matchメソッドは、パターンにマッチした場合、マッチした文字列を返却してくれるものです。
○コード例
<script> var numbers = "111-1111-1111"; var regexp = new RegExp(/^\d{3}-\d{4}-\d{4}$/); var result = numbers.match(regexp); document.write(result); </script>○実行結果
上記の例ではパターンに一致しているので、「111-1111-1111」が返却されています。
searchメソッド
seatchメソッドでは正規表現のパターンに合致した文字列の「位置」を返却します。
○コード例
<script> var numbers = "111-1111-1111"; var regexp = new RegExp(/^\d{3}-\d{4}-\d{4}$/); var result = numbers.search(regexp); document.write(result); </script>○実行結果
上記の例ではパターンに合致しているので、合致している文字列の1文字目の位置である「0」が返却されています。
例によって、数値は1からではなく0からカウントします。
パターンに合致しなかった場合は「-1」を返却してくれます。
まとめ
本記事ではJavaScriptの正規表現について解説しました。
正規表現を使うことで、文字列が形式に沿っているかのチェックや高度な文字列処理が行えます。
正規表現は慣れると便利ですので、やり方を覚えてみてくださいね。
次回はJavaScriptのjsonの使い方、をみていきましょう。
コメント