多くのプログラム言語では、正規表現を用いることでさまざまな機能を実装することができます。
しかし、実際にはこのような疑問を持っている方もいるのではないでしょうか。
「JavaScriptの正規表現ってどうやって使うの？」
「正規表現の活用方法を知りたい」
「聞いたことはあるけど、よくわからない」
そこで今回は、JavaScriptの正規表現における疑問を解消し、実際に活用できるように仕組みを解説していきたいと思います。
正規表現とは
「正規表現」とは、文字列内で文字の組み合わせを照合したり、文字を置き換えるために用いられる方法です。
正規表現は、特殊文字が組み合わさってできるパターンとオプションのフラグによって構成されています。
また、英語で正規表現のことを「Regular Expression」と言います。
JavaScriptでは、RegExpオブジェクトを利用して正規表現を処理します。
RegExpオブジェクトを作成するための構文は以下の2種類です。
//コンストラクタ関数
const regexp = new RegExp('pattern');
//正規表現リテラル
const regexp = /pattern/;このようにコンストラクタ関数か正規表現リテラルを使います。
上記の構文にかんたんなパターンを当てはめると以下のようになります。
//コンストラクタ関数
const regexp = new RegExp('[a-z]+');
//正規表現リテラル
const regexp = /[a-z]+/;「[a-z]+」が何を示しているかと言うと、「[a-z]」が小文字のアルファベットを意味し、「+」が一文字以上続くことを意味しています。
正規表現のパターン
JavaScriptの正規表現には、数多くのパターンが存在するため、すべてを取り上げることはできませんが、代表的なものとして以下のようなものがあります。
文字列の先頭を表す
「^」を使うと、文字列の先頭を表すことができます。
この場合、文字列の先頭に小文字のアルファベットが1文字以上来ることを意味します。
const regexp = /^[a-z]+/;文字列の末尾を表す
「$」を使うと、文字列の末尾を表すことができます。
この場合、文字列の末尾に小文字のアルファベットが来ることを意味します。
const regexp = /[a-z]$/;aまたはbのどちらかを表す
「|」を使うと、2つのうちのどちらかを表すことができます。
この場合、文字列の末尾がabcまたはxyzであることを意味します。
const regexp = /(abc|xyz)$/;いずれかの文字を表す
「[]」を用いると、[]内のいずれかの文字を表すことができます。
この場合、末尾が大文字のアルファベットか数字であることを意味します。
const regexp = /[A-Z0-9]$/;フラグ
JavaScriptの正規表現で用意されているフラグは以下の6つです。
・i：大文字と小文字を区別しない
・g：すべて一致するものを表す
・m：先頭と末尾を示す「^」と「$」が複数の行で機能する
・s：「.」が改行文字に一致する
・u： Unicodeサポートを有効にする
・y：指定された位置からのみ照合される
パターンに加えてフラグを用いると、より高度な検索を行うことができます。
例えば、以下のようすると大文字と小文字を区別しないアルファベットを指定することができます。
const regexp = /[a-z]+/i;メソッド
JavaScriptの正規表現には、文字列の照合や検索などを行うためのメソッドがいくつか用意されています。
ここでは代表的なメソッドとして以下の3つを紹介します。
str.match
「str.match」は、合致する文字列パターンを見つけるためのメソッドです。
フラグ「g」と「i」を用いた正規表現にmatchメソッドを使うと、小文字と大文字を区別せず、一致するすべてのアルファベット文字が配列で返されます。
この場合、「!」はアルファベット文字でないため、除外されます。
const str = 'Hello, World!';
const regexp = /[a-z]+/gi;
console.log(str.match(regexp));
//["Hello", "World"]また、一致するものがない場合は、nullが返されます。
const str = 'Hello, World!';
const regexp = /[0-9]+/;
console.log(str.match(regexp));
//nullstr.replace
「str.replace」は、文字列を置き換えることができるメソッドです。
replaceメソッドの第1引数に置き換え元の文字列を、第2引数に置き換えたい文字列を指定すると、その値を返します。
const str = 'Hello, 12345';
const regexp = /[0-9]+/;
console.log(str.replace(regexp, 'World!'));
//"Hello, World!"regexp.test
「regexp.test」は、合致する文字列パターンを検索するメソッドです。
見つかればtrue、見つからなければfalseを返します。
const regexp = /[a-z]+/;
const str1 = 'hello, world!';
const str2 = 'HELLO, WORLD!';
console.log(regexp.test(str1)); //true
console.log(regexp.test(str2)); //false正規表現を使ってフォーマットをチェック
ここまで正規表現の構成やパターン、メソッドについて解説してきましたが、実際にはどのような場面で使われているのでしょうか。
例えば、Webサイトへログインする際に入力する「メールアドレス」や「パスワード」、ネットショッピングをする際に入力する「郵便番号」のフォーマットチェックのために使われています。
メールアドレスの正規表現は、既に良く使われているパターンがネット上のさまざまな場所で公開されています。
以下は、そのメールアドレスの正規表現パターンの一例です。
const regexp = /^([^@\s]+)@((?:[-a-z0-9]+\.)+[a-z]{2,})$/i;パスワードであれば、「アルファベットと数字、特殊文字を含めた8桁以上であること」など、より厳密にチェックが行われることが多いです。
セキュリティの観点からも正規表現を使ったフォーマットチェックは重要な役割を持つことが分かります。
まとめ
今回は、JavaScriptの正規表現について解説しました。
正規表現が使えるようになると、JavaScriptでフォームを実装する際に役に立ちます。
しかし、正規表現については、一冊の本が書けるほどボリュームのある内容のため、一度ですべて覚える必要はありません。
あらかじめ仕組みだけ知識として入れておき、必要なときに都度調べていくのも良いでしょう。
ぜひ上記の内容を参考にしてみてください。
JavaScript関連記事
