最新!JavaScript入門講座ー正規表現の特殊文字をわかりやすく解説

JavaScript
この記事は約8分で読めます。

入力される任意の文字列とあらかじめ決めていた文字列が一致するかどうか判定するプロパティが文字列にはありますが、さらに細かく判定する方法があります。
フォームで入力するなどのときに文字列を判定する、といった場面が考えられます。そんなときに使うのが正規表現になります。正規表現は文字列を細かく判定するためのかなり重要な内容です。

この記事では、初学者の方向けに正規表現について解説していきます。

本記事のペルソナ
  • 正規表現について学びたい方
  • JavaScript初学者の方
  • 基本的な文字列のマッチングを学びたい方


正規表現の解説

正規表現の定義

正規表現を行うために、まずはあらかじめ定義しておく文字列のパターンを定義します。正規表現を定義するにはオブジェクトとリテラルの2通りの定義の仕方があります。

書き方の例

//リテラル
let 変数名 = /文字列のパターン/

//オブジェクト
let 変数名 = new RegExp(“文字列パターン”,)

上が正規表現を行うための正規表現オブジェクトの定義の方法になります。リテラルで行う場合、文字列パターンを定義するには/(スラッシュ)で囲みます。オブジェクトを利用する場合は文字列同様、ダブルクォーテーションで囲みます。 

正規表現の特殊文字

正規表現には普通の文字以外にも、さらに細かな文字列についての正規表現と一致するかを調べるために特殊な文字列が存在します。
まずはその特殊文字について順に解説していきます。

文字クラスの正規表現

まずは文字クラスについて説明していきます。正規表現の文字クラスは下記になります。

特殊文字解説
/./任意の文字1文字に一致する。%,#といった記号も含む
ただし\n,\rといった文字は例外
/\d/任意の数字1文字に一致する
/\D/数字以外の文字、1文字に一致する。\dの逆となる
/\w/アンダースコアを含む半角英数字1文字と一致する
/\W/半角英数字以外の1文字と一致する。\wの逆となる
/\s/スペース・改行・タブ・改ページなどに一致する
/\S/\sの逆で、スペース・改行・タブ・改ページ以外の文字と一致する
/\t/タブに一致する
/\r/復帰文字に一致する
/\n/改行に一致する
/\v/垂直タブに一致する
/\f/改ページに一致する
/\0/NULL文字に一致する

では、実際のサンプルを見てみましょう。

let reg = /\d\d\d-\d\d\d/;
let str1 = "123-331";
let str2 = "135"

console.log(reg.test(str1));
console.log(reg.test(str2));


reg = /Takenaka\w\wijo/;
str1 = "Takenaka2aijo";
str2 = "Takenakaheijo";

console.log(reg.test(str1));
console.log(reg.test(str2));

reg = /A..\won \d\d\d\d/;

str1 = "Amazon1980";
str2 = "Am4zon 1990";

console.log(reg.test(str1));
console.log(reg.test(str2));
$ node regexp.js

true
false
true
true
false
true

実行するとこのようになります。
testメソッドは文字列が正規表現にマッチするかどうかをtrue,falseのどちらかで返します。

範囲・グループ・境界の正規表現

続いては文字列の範囲・グループ・境界に関連する特殊文字について解説していきます。

特殊文字解説
/^x/^記号の直後の文字列xの先頭と一致する
/x$/$記号の直前の文字列xの末尾と一致する
/\b/単語と単語の区切りと一致する
/\B/文字列の先頭と末尾以外の文字と一致する。
/x|y/文字列x文字列yどちらかと一致する
/[xyz]/文字列の集合で角括弧内の文字列と一致する
/[0-9]/文字列で0から9の文字のいずれか一文字と一致する。
角括弧内でハイフンを使うと文字の一致する範囲を決めることが可能。\dと同義
/[^0-9]/文字列0から9以外の文字と一致する。角括弧内で^を使うと否定の意味になる
\Dと同義

では、実際のサンプルをみていきましょう。

let reg = /^stocks$/;
let str1 = "I have three stocks";
let str2 = "stocks"

console.log(reg.test(str1));
console.log(reg.test(str2));


reg = /\Boldstock\B/;
str1 = "I have goldstock";
str2 = "I have goldstocks";

console.log(reg.test(str1));
console.log(reg.test(str2));

reg = /[A-Z][A-Z][A-Z]|[A-Z][A-Z][A-Z][A-Z]/;

str1 = "AA";
str2 = "AMZN";

console.log(reg.test(str1));
console.log(reg.test(str2));
$ node regexp.js

false
true
false
true
false
true

それぞれがなぜこのような結果になるか、理解できますでしょうか。
1つ目は文字列の先頭ではないのでfalseになります。2つ目は先頭であり、末尾であるのでtrueになります。
3つ目は文字列が末尾になっているのでfalseです。4つ目は先頭、末尾ではないのでtrueです。
5つ目は2文字なのでfalse、最後は4文字であるのでtrueになります。

数量詞の正規表現

最後に、数が関わってくる正規表現の特殊文字について解説していきます。数というのは、文字数や回数といった意味です。

特殊文字解説
/x*/任意の文字列xの0字以上と一致する
/x+/任意の文字列xの1字以上と一致する
/x?/任意の文字列xの0字か1字と一致する
x{n}任意の文字列xがn回出現する文字列と一致する
x{n,}任意の文字列xが少なくともn回以上出現する文字列と一致する
x{n,m} (0<= n < m )任意の文字列xがn回以上m回以下出現する文字列と一致する
let reg = /\w+\d{3,}/;
let str1 = "129";
let str2 = "NVDA799"

console.log(reg.test(str1));
console.log(reg.test(str2));


reg = /\d[a-z]{6}/;
str1 = "100amazon";
str2 = "1amazon";

console.log(reg.test(str1));
console.log(reg.test(str2));

reg = /[A-Z]{6}|[x-z]{4}/;

str1 = "nvidiaaaaaa";
str2 = "AMAZON";

console.log(reg.test(str1));
console.log(reg.test(str2));

reg = /^[a-zA-Z0-9+-._]+@([a-zA-Z0-9][a-zA-Z0-9]*[a-zA-Z0-9]*\.)+[a-z]{2,}$/;
str1 = "nakanuki.nakanuki@nakanuki.co.jp";
str2 = "nakanuki.co.jp";

console.log(reg.test(str1));
console.log(reg.test(str2));
$ node regexp.js

false
true
true
true
false
true
true
false

それぞれがどのような理論でこのような結果になるか理解しましょう。
7つめと8つめはこれは少々複雑になっていますが、メールアドレスの正規表現の例になります。ローカル部分とドメイン部分が@で分かれています。

7つ目はローカル部分、ドメイン部分どちらも正しく入力されています。8つ目はローカル部分が欠損しています。よってfalseという結果になるわけです。

まとめ

今回のまとめに入ります。
今回は下記のようなことを学びました。

まとめ
  • JavaScriptの正規表現
  • 正規表現に使う特殊文字
  • 数量詞
  • 境界・範囲
  • 文字クラス

今回はここまでとなります。お疲れ様でした。

参考文献

にほんブログ村 IT技術ブログへ
にほんブログ村
タイトルとURLをコピーしました