JavaScript is not available.

           

Copyright © 2016-2018 MediaKobo Co., Ltd. All rights reserved.

JavaScript コンソール       ホーム       目次

正規表現

　正規表現とは、文字列をパターンで表現する手法です。

概要

　電話番号は、"03-1234-5678" のように記述されますが、これが電話番号の形式にあっているか調べたい、局番を取り出したいなどの要求に答えるためのプログラムを作るのはそれなりに手間がかかります。

　そこで、正規表現を使います。
　正規表現では、調べたい文字列をパータンで表現します。

　電話番号の場合、「先頭から２桁の数字、ハイフン、４桁の数字、ハイフン、４桁の数字で終わる」パターンと見ることができます（例題を簡単にしたいので、市外局番が２桁でない場合は考慮してません）。

　正規表現では、１桁の数字は、\d で表現するので、電話番号のパターンは、

\d\d-\d\d\d\d-\d\d\d\d

と表すことができます。

　また、局番を取り出したいので、局番にカッコを付けます。

\d\d-(\d\d\d\d)-\d\d\d\d

　更に、先頭を表す ^ 、末尾を表す $ を付けます。

^\d\d-(\d\d\d\d)-\d\d\d\d$

　プログラム中に正規表現のパターンを記述する書き方として、パターンの前後に、スラッシュを書きます。

/^\d\d-(\d\d\d\d)-\d\d\d\d$/

　この正規表現を変数 reg に代入し、電話番号を変数 str に代入し、文字列の match メソッドを実行すると、正規表現に適合した文字列、カッコでグループ化した文字列が取り出せます。
実行結果は、▶ Run ボタンを押して見て下さい。

▶ Run

var reg = /^\d\d-(\d\d\d\d)-\d\d\d\d$/;
var str = "03-1234-5678";
console.log(str.match(reg));

　ここで、📝 Edit 機能で電話番号の桁数などを変えてみて下さい。パターンにマッチしないと番号を取り出せません。

　正規表現の機能を使うには、正規表現のパターンを作成し、オプションフラグを指定し、メソッドを呼び出し結果を取り出さなければなりません。
　以下、パターン、オプションフラグ、メソッドについて説明します。

正規表現のパターン

　正規表現のパターンをどう記述するか、これが正規表現を使う上での一番のキーポイントです。
　正規表現は、正直ややこしいです。しかし、ややこしさ以上にメリットも大きいです。

　以下、正規表現で利用できるパターンについて説明していきます。

※　以下の例での注意点
　以下の例では、正規表現のオプションプラグに g （グローバル検索）オプションを付けています。 パターンの最後のスラッシュの後ろに g が付きます。
　このオプションを付けないと、最初にパターンにマッチしたところでマッチングの動作を終了してしまいます。
　このオプションを付けると、パターンを見つけても、最後までマッチングの動作をし、全てのマッチングの結果を返します。
　また、マッチングに失敗すると null が返されます。

xxx - そのもの

　検索したい文字そのものをパターンとして記述することができます。

▶ Run

var reg = /1234/g;
var str = "03-1234-5678";
console.log(str.match(reg));

xx|yy - xx または yy

　どちらかの文字にマッチしたい場合、| で区切って、記述します。

▶ Run

var reg = /123|567/g;
var str = "03-1234-5678";
console.log(str.match(reg));

　以下の例の場合、やりたいことは、<p> または <br> または <div> にマッチさせたいのですが、<p または br または div> にマッチしてしまいます。

▶ Run

var reg = /<p|br|div>/g;
var str = "<p> <br> <div>";
console.log(str.match(reg));

　このような場合、括弧 ( ) を使って、まとめることで意図したように対応できます。

▶ Run

var reg = /<(p|br|div)>/g;
var str = "<p> <br> <div>";
console.log(str.match(reg));

　上述した概要で、局番を取り出したい時に同じ括弧 ( ) を使いました。 この場合の括弧は、キャプチャリング括弧と呼ばれ、意味合いが少し異なります。 このあたりも、正規表現をややこしくしている要因でしょうか？

[xyz] - x, y, z のいずれか

　カギ括弧でくくられた文字は、カッコ内のいずれかの１文字とマッチします。

▶ Run

var reg = /[13579]/g;
var str = "03-1234-5678";
console.log(str.match(reg));

　カッコ内にハイフンがあるとハイフン前の文字からハイフン後の文字までのいずれかになります。
　例えば、[a-z] は、小文字のアルファベットを表し、[a-zA-Z0-9-] は、英字のドメイン名で使える文字を表します。

▶ Run

var reg = /[4-9]/g;
var str = "03-1234-5678";
console.log(str.match(reg));

[^xyz] - x, y, z のいずれかでない

　ハット ^ 付きのカギ括弧でくくられた文字は、カッコ内のいずれかの１文字以外ととマッチします。

▶ Run

var reg = /[^13579]/g;
var str = "03-1234-5678";
console.log(str.match(reg));

　ハット ^ 付きのカギ括弧でも、ハイフンが使えます。

▶ Run

var reg = /[^4-9]/g;
var str = "03-1234-5678";
console.log(str.match(reg));

* - ０回以上の繰り返し

　直前の文字の０回以上の繰り返しにマッチします。
　後述する表記の {0,} に相当します。
　以下の場合、ハイフンがあってもなくてもマッチします。

▶ Run

var reg = /[0-9][0-9]-*[0-9][0-9]/g;
var str = "03-1234-5678";
var str1 = "0312345678";
console.log(str.match(reg));
console.log(str1.match(reg));

+ - １回以上の繰り返し

　直前の文字の１回以上の繰り返しにマッチします。
　後述する表記の {1,} に相当します。
　以下の場合、ハイフンがないとマッチしません。

▶ Run

var reg = /[0-9][0-9]-+[0-9][0-9]/g;
var str = "03-1234-5678";
var str1 = "0312345678";
console.log(str.match(reg));
console.log(str1.match(reg));

? - ０回か１回か

　直前の文字が０回か１回ある場合にマッチします。
　後述する表記の {0,1} に相当します。
　以下の場合、ハイフンがあってもなくてもマッチします。

▶ Run

var reg = /[0-9][0-9]-?[0-9][0-9]/g;
var str = "03-1234-5678";
var str1 = "0312345678";
console.log(str.match(reg));
console.log(str1.match(reg));

{n} - n回

　直前の文字がn回ある場合にマッチします。
　n は正の整数です。

▶ Run

var reg = /[0-9]{3}/g;
var str = "03-1234-5678";
console.log(str.match(reg));

{n,} - n回以上

　直前の文字がn回以上ある場合にマッチします。
　n は正の整数です。

▶ Run

var reg = /[0-9]{3,}/g;
var str = "03-1234-5678";
console.log(str.match(reg));

{n,m} - n回以上、m回以下

　直前の文字がn回以上、m回以下ある場合にマッチします。
　n, m は正の整数です。

▶ Run

var reg = /[0-9]{3,4}/g;
var str = "03-123-5678-90123";
console.log(str.match(reg));

　正規表現にマッチする場合、暗黙の了解として、最大限に長く取れるようにマッチします。
　上記の例の場合、３桁、または、４桁にマッチしますが、４桁にマッチするなら４桁にマッチし、３桁にしかマッチしない場合に３桁になります。
　また、文字列を順にマッチするか調べるので、重複してマッチするようなものは選ばれません。 上記の例では、9012 にマッチしたら、0123 にはマッチしません。

^ - 先頭

　ハット ^ は、先頭にマッチします。

▶ Run

var reg = /^[0-9]+/g;
var reg1 = /[0-9]+/g;
var str = "03-1234-5678";
console.log(str.match(reg));
console.log(str.match(reg1));

$ - 末尾

　ドル記号 $ は、末尾にマッチします。

▶ Run

var reg = /[0-9]+$/g;
var reg1 = /[0-9]+/g;
var str = "03-1234-5678";
console.log(str.match(reg));
console.log(str.match(reg1));

特殊文字

　正規表現のパターンには、以下のような特殊な文字を指定できます。

\	エスケープ文字 パターンの記述に用いられる文字を記述したい時 例、\\, \{, \}, \[, \], \*, \+, \?, \(, \), \-, \^, \$, \.
.	ピリオド　改行文字以外の１文字
[\b]	バックスペース(U0008)
\b	単語の区切り
\B	単語の区切り以外
\cX	制御文字 Xには、A から Z の一字
\d	数字 [0-9]
\D	数字以外 [^0-9]
\f	改ページ(U000C)
\n	改行(U000A)
\r	リターン(U000D)
\s	スペース、タプ、改ページ、改行など
\S	スペース、タプ、改ページ、改行など以外
\t	タブ(U0009)
\v	垂直タブ(U000B)
\w	英数字とアンダースコア [A-Za-z0-9_]
\W	英数字とアンダースコア以外 [^A-Za-z0-9_]
\n	n 番目の括弧 () にマッチした文字列の後方参照
\0	NULL(U0000)
\xhh	２桁の16進コード文字(hh)
\uhhhh	４桁の16進コード文字(hhhh)
\u{hhhh}	４桁の16進 Unicode 文字(hhhh)

　正規表現のパターンを、上述したスラッシュ(/)でくくる方法でなく、文字列で設定する方法もあります。
　この場合、特殊文字に出てくるバックスラッシュ(\)は、JavaScript の規定によりエスケープしなければならないので、バックスラッシュを記述したいときは、バックスラッシュを２個(\\)記述しなければなりません。

▶ Run

var reg = '\\d+';
var reg1 = new RegExp("\\d+","g");
var str = "03-1234-5678";
console.log(str.match(reg));
console.log(str.match(reg1));

グループ化

　正規表現のパターンには、以下のような記述もあります。

(x)	括弧でくくられた文字列をキャプチャして記憶します
(?:x)	括弧でくくられた文字列をキャプチャしますが記憶しません
x(?=y)	x に y が続く場合にマッチします
x(?!y)	x に y が続かない場合にマッチします

正規表現のオプションフラグ

　正規表現は、以下のような形式で、パターンとオプションフラグを記述します。
　オプションフラグは、省略可能です。

var reg = /pattern/flags;
var reg = new RegExp("pattern", "flags");

　正規表現検索のオプションフラグには、以下のものがあります。

g	グローバル検索
i	大文字・小文字を区別しない検索
m	複数行検索
u	Unicode
y	最後のマッチした位置から検索の再開

正規表現のメソッド

　正規表現は、スラッシュでくくったり、文字列で記述したり、RegExp オブジェクトを利用したり、しなかったりで何通りかの記述方法があります。
　以下に正規表現の記述例を示します。

▶ Run

var reg1 = /\d+/g;
var reg2 = "\\d+";
var reg3 = new RegExp(/\d+/g);
var reg4 = new RegExp(/\d+/, "g");
var reg5 = new RegExp("\\d+", "g");
var str = "03-1234-5678";
console.log(str.match(reg1));
console.log(str.match(reg2));
console.log(str.match(reg3));
console.log(str.match(reg4));
console.log(str.match(reg5));

　正規表現のメッソドは、以下のような RegExp のメソッド、String のメッソドがあます。

RegExp	exec	パターンとマッチする文字列を返します
	test	パターンンとマッチするものがあるかどうか、true / false で返します
String	match	パターンとマッチする文字列を配列で返します
	search	パターンとマッチしたインデックス(位置)を返します
	replace	パターンとマッチした文字列を、別の文字列に置換します
	split	パターンとマッチしたところで分割し、配列で返します

　以下、それぞれのメソッドのサンプルを示します。

RegExp - exec

　パターンとマッチする文字列を返します。

▶ Run

var reg = new RegExp(/\d+/, "g");
var str = "03-1234-5678";
console.log(reg.exec(str));
console.log(reg.exec(str));
console.log(reg.exec(str));

RegExp - test

　パターンンとマッチするものがあるかどうか、true / false で返します。

▶ Run

var reg = new RegExp(/\d+/, "g");
var str = "03-1234-abcd";
console.log(reg.test(str));
console.log(reg.test(str));
console.log(reg.test(str));

String - match

　パターンとマッチする文字列を配列で返します。

▶ Run

var reg = /\d+/g;
var str = "03-1234-5678";
console.log(str.match(reg));

String - search

　パターンとマッチしたインデックス(位置)を返します。

▶ Run

var reg = /\d+/g;
var str = "ab-1234-5678";
console.log(str.search(reg));

String - replace

　パターンとマッチした文字列を、別の文字列に置換します。

▶ Run

var reg = /\d+/g;
var str = "03-1234-5678";
console.log(str.replace(reg, 'abcd'));

String - split

　パターンとマッチしたところで分割し、配列で返します。

▶ Run

var reg = /-/g;
var str = "03-1234-5678";
console.log(str.split(reg));

目次へ