JavaScriptの正規表現

基本的な使い方

正規表現は検索したいワードを「パターン」として定義し、文字列の検索をする機能です。
パターンに一致する文字列を探すだけでなく、特定の文字列を置き換えたり、分割することもできます。

まずは基本的な使い方を3つ紹介します。

基本的な使い方 その1

文字列にmatchメソッドを使って検索します。

コード例

var text = 'I like cat. Cat is so pretty.';

// 検索を実行
var matches = text.match( /cat/gi);
console.log(matches);
// (2) ["cat", "Cat"]

matchメソッドの引数に正規表現を直接指定して検索する、最もシンプルな検索方法です。
この方法は手軽ですが、正規表現で検索ワードを指定するとき（この例ではcat）に変数の値を使うことができません。
変数を使って動的に指定したいときは以下2つのいずれかの方法を使います。

基本的な使い方 その2

2つ目の方法も先ほどと同じmatchメソッドを使いますが、正規表現の指定にRegExpオブジェクトを使います。
こちらの方法は検索ワードの指定に変数の値を使うことができます。

コード例

var text = 'I like cat. Cat is so pretty.';
var search_word = 'cat';

// 正規表現を作成
var regexp = new RegExp( search_word, 'gi');

// 検索を実行
var matches = text.match(regexp);
console.log(matches);
// (2) ["cat", "Cat"]

RegExpオブジェクトを作成するときに、第1パラメータに変数search_wordの値「cat」を渡し、第2パラメータにフラグを指定します。
作成したインスタンスは変数regexpに入れて、matchメソッドに渡して検索を行います。
出力結果は先ほどと同じです。

基本的な使い方 その3

正規表現のオブジェクトであるRegExpオブジェクトのexecメソッドを使った検索方法です。

コード例

var text = 'I like cat. Cat is so pretty.';
var search_word = 'cat';

// 正規表現オブジェクトを作成
var regexp = new RegExp( search_word, 'gi');

// 検索を実行
while(matches = regexp.exec(text)){
	console.log(matches);
}
// ["cat", index: 7, input: "I like cat. Cat is so pretty.", groups: undefined]
// ["Cat", index: 12, input: "I like cat. Cat is so pretty.", groups: undefined]

「new RegExp」で正規表現のRegExpオブジェクトを作成するところまでは先ほどと同じですが、検索するときにregexp.execで正規表現のオブジェクトからメソッドを呼び出し、パラメータとして検索対象の文字列を渡す形になっているところが大きく異なります。

execメソッドの戻り値は、ヒットした文字列がある場合には以下の配列形式で返し、見つからない場合はnullを返します。

• ヒットした文字列
• 括弧を使ったキャプチャリングがある場合は保持している文字列
• ヒットした文字列の開始位置(index)
• 検索元の文字列(text)
• キャプチャグループ(groups)

文字列のStringオブジェクトから検索するパターンを2つと、正規表現のRegExpオブジェクトから検索するパターン1つを紹介しました。
以上のように、正規表現の検索ではStringオブジェクトのメソッドを使うか、RegExpオブジェクトのメソッドを使うかを選ぶことができます。

特殊文字

正規表現は検索条件として指定するパターンに「特殊文字」を使用することができます。
例えば、次のように「https」を検索すると、特殊文字を使用しなければ2箇所ヒットします。

コード例

var text = 'https://gray-code.com/example/about-the-https/';

var matches = text.matchAll( /https/g);
for (var match of matches) {
  console.log(match);
}
// ["https", index: 0, input: "https://gray-code.com/example/about-the-https/", groups: undefined]
// ["https", index: 40, input: "https://gray-code.com/example/about-the-https/", groups: undefined]

ここで、先頭にマッチする特殊文字「^」を使うと先頭のみ検索するように変更することができます。

コード例

var text = 'https://gray-code.com/example/about-the-https/';

var matches = text.matchAll( /^https/g);
for (var match of matches) {
  console.log(match);
}
// ["https", index: 0, input: "https://gray-code.com/example/about-the-https/", groups: undefined]

以下の表は、JavaScriptの正規表現で利用可能な特殊文字の一覧です。
なお、Windows環境ではバックスラッシュは「¥（円マーク）」になります。

特殊文字のエスケープ

正規表現の特殊文字として定義されている文字を通常の文字として検索したいときは、文字の前に「\（バックスラッシュ）」を付けてエスケープします。
Windowsの場合は「¥（円マーク）」になります。

エスケープのコード例

var text = 'a*b=12';
var matches = text.match(/\*/);
console.log(matches);
// ["*", index: 1, input: "a*b=12", groups: undefined]

「\（バックスラッシュ）」をエスケープすることも可能です。

エスケープのコード例

var text = '//\\//';
var matches = text.match(/\\/);
console.log(matches);
// ["\", index: 2, input: "//\//", groups: undefined]

フラグ

すでに何度か登場していますが、正規表現ではフラグを使って検索条件の設定を指定することができます。

以下の例では、まずはフラグを使わずに検索をしています。
アルファベット「cat」の大文字／小文字の違いを区別した完全一致のみで、かつ1つでもマッチした時点で検索を終了します。

コード例（フラグ未使用）

var text = 'I like cat. Cat is so cute. The black cat is the most cute.';
var matches = text.match(/cat/);
console.log(matches);
// ["cat", index: 7, input: "I like cat. Cat is so pretty.", groups: undefined]

最初にマッチする「I like cat.」で検索が終了しています。
そこで、全件検索を行うgフラグを設定して改めて検索を実行してみます。

コード例（gフラグ使用）

var text = 'I like cat. Cat is so cute. The black cat is the most cute.';
var matches = text.match(/cat/g);
console.log(matches);
// (2) ["cat", "cat"]

1文目の「I like cat.」に加えて、3文目の「The black cat is the most cute.」もマッチするようになりました。
もう1つ、2文目に登場する頭文字が大文字の「Cat」も検索にマッチするようにiフラグを設定します。

コード例（giフラグ使用）

var text = 'I like cat. Cat is so cute. The black cat is the most cute.';
var matches = text.match(/cat/gi);
console.log(matches);
// (3) ["cat", "Cat", "cat"]

iフラグはアルファベットの大文字／小文字の区別をせずに検索することができます。
以上のように、フラグは必要に応じて2個以上組み合わせて指定することもでき、検索にマッチする条件を設定することができます。

以下の表は、JavaScriptの正規表現で利用可能なフラグの一覧です。

括弧の使い方

正規表現の中にある括弧は「キャプチャリング括弧」と呼び、括弧を使ってパターンを記述するとマッチした文字列を保持することができます。
保持している文字列は$1、$2などの特殊文字でアクセスすることができます。

以下の例はパターンにマッチした文字列を置き換えるreplaceメソッドとキャプチャリング括弧を使って、元の文字列の並び替えを行います。

コード例

var text = 'あそこに黒猫、ここに白猫。';
var matches = text.replace(/(黒猫)(.+)(白猫)/, '$3$2$1');
console.log(matches);
// あそこに白猫、ここに黒猫。

1つ目の括弧は「黒猫」にマッチ、2つ目の括弧は「.+」で「、ここに」にマッチ、そして3つ目の括弧は「白猫」にマッチして、それぞれマッチした文字列を保持します。
保持した文字列は先頭（左）から順に$1、$2、$3で使用できるので、置き換える文字を「$3$2$1」と正反対の並びにして「黒猫」と「白猫」の位置を逆転させました。

文字列の置き換えでなく通常の文字列検索においても、キャプチャリング括弧でマッチして保持した文字列を取得することができます。
以下の例ではmatchメソッドを使って、マッチした文字列を出力します。

キャプチャリング括弧のコード例

var text = 'あそこに黒猫、ここに白猫。';
var matches = text.match(/(黒猫)(.+)(白猫)/);

console.log(matches);
// (4) ["黒猫、ここに白猫", "黒猫", "、ここに", "白猫", index: 4, input: "あそこに黒猫、ここに白猫。", groups: undefined]

変数matchesを出力すると、長さが4の配列が出力されます。
これは先頭にはマッチした文字列全体が入っており、その後に続いてキャプチャリング括弧にマッチして保持した文字列が先頭から順に格納されています。
通常の配列なので、例えば3つ目の括弧で保持した文字列を参照したいときは次のようにします。

キャプチャリング括弧のコード例

var text = 'あそこに黒猫、ここに白猫。';
var matches = text.match(/(黒猫)(.+)(白猫)/);

console.log(matches[3]);
// 白猫

括弧でマッチした文字列を保持したくない場合は「非キャプチャリング括弧」を使います。
非キャプチャリング括弧を使うには、括弧の先頭に特殊文字「?:」を記述します。
以下の例では、2番目の括弧だけ非キャプチャリング括弧にして文字列を保持しないようにしています。

非キャプチャリング括弧のコード例

var text = 'あそこに黒猫、ここに白猫。';
var matches = text.match(/(黒猫)(?:.+)(白猫)/);

console.log(matches);
// (3) ["黒猫、ここに白猫", "黒猫", "白猫", index: 4, input: "あそこに黒猫、ここに白猫。", groups: undefined]

出力された配列を確認すると、長さが3になって2つ目の括弧でマッチした文字列が含まれていないことが分かります。

名前付きキャプチャグループ

括弧はマッチした文字列にラベルをつけてグルーピングする機能もあります。
マッチした文字列にグループのラベルを付けるには、以下のように括弧の中で「?<label>」をつけてからマッチするパターンを記述します。
「?<label>」の「label」部分は自由なラベルを指定できます。

以下の例ではラベルを「cat」と付けてマッチした文字列を保持する設定にし、マッチした文字列を出力します。

名前付きキャプチャグループのコード例

var text = 'あそこに黒猫、ここに白猫。そしてあそこには茶猫。';
var matches = text.matchAll(/(?<cat>.{1}猫)/g);

for (var match of matches) {
  console.log(match.groups.cat);
  // 黒猫
  // 白猫
  // 茶猫
}

グループのラベルが付いている場合は、groupsの中にラベルをプロパティ名にしてマッチした文字列が保持されます。
上の例ではラベルを「cat」としているので、「groups.cat」で保持している文字列を参照して出力しています。

正規表現が使えるメソッド

JavaScriptで正規表現を使うことができるメソッドは次の7つあります。
各メソッドはRegExpオブジェクトのメソッドか、Stringオブジェクトのメソッドのいずれかに分かれます。

用途で分けると、「検索」をするメソッドはexecメソッド、testメソッド、matchメソッド、matchAllメソッド、searchメソッドの5つ、それ以外に「置き換え」を行うreplaceメソッド、「分割」を行うsplitメソッドの3種類に分けることができます。

検索するメソッドは種類は多いですが、必要な戻り値の形式や全件検索をする必要があるかで判断します。

使用例

最後に、上記の7つのメソッドの基本的な使い方を紹介します。

execメソッドの使い方

execメソッドはパターンにマッチする文字列を検索し、マッチする文字列の情報を配列形式で返します。

コード例

var text = 'I like cat. Cat is so cute.';

var search_word = 'cat';
var regexp = new RegExp( search_word);

matches = regexp.exec(text);
console.log(matches);
// ["cat", index: 7, input: "I like cat. Cat is so cute.", groups: undefined]

変数search_wordに検索したいワードを入れ、new RegExpに渡して正規表現のパターンを作成して変数regexpに入れます。
その後にregexpからexecメソッドを呼び出して元の文字列からsearch_wordにマッチする文字列を検索します。

フラグの指定がない場合は最初にマッチした時点で検索は終了しますが、gフラグを使って全件検索することもできます。

コード例 その2

var text = 'I like cat. Cat is so cute.';

var search_word = 'cat';
var regexp = new RegExp( search_word, 'gi');

var matches = null;
while(matches = regexp.exec(text) ){
  console.log(matches);
}
// ["cat", index: 7, input: "I like cat. Cat is so cute.", groups: undefined]
// ["Cat", index: 12, input: "I like cat. Cat is so cute.", groups: undefined]

正規表現のパターンを作成するときに、全件検索のgフラグと、大文字／小文字を区別しないiフラグを2つ指定しています。
このパターンを使ってwhile文の条件式の中で検索を実行し、マッチする文字列が見つかったらデータを出力して、見つからなければループ処理を終了します。

testメソッドの使い方

testメソッドはパターンにマッチする文字列を検索し、マッチする文字列が見つかればtrue、無ければfalseを返します。

コード例

var text = 'I like cat. Cat is so cute.';

var search_word = 'cat';
var regexp = new RegExp( search_word);

var matches = regexp.test(text);
console.log(matches);
// true

戻り値がtrueかfalseなので、シンプルにマッチする文字列が含まれるかを確認したいときに便利なメソッドです。

gフラグを使って全件検索を行った場合は、testメソッドを実行する度に検索開始位置をマッチした文字列以降にずらして検索することができます。

コード例 その2

var text = 'I like cat. Cat is so cute.';

var search_word = 'cat';
var regexp = new RegExp( search_word, 'gi');

var matches = null;
while(matches = regexp.test(text) ){
	console.log(matches);
}
// true
// true

上記の例ではtestメソッドを1回目に実行したときは元の文字列の先頭から検索を開始し、2回目に実行するときは「I like cat」より後ろから検索を開始します。
この処理をマッチする文字列が見つかる度に繰り返すことで、元の文字列にいくつマッチする文字列が含まれるかを数えることができます。

matchメソッドの使い方

matchメソッドはパターンにマッチする文字列を検索し、最初にマッチした文字列の情報を配列形式で返します。

コード例

var text = 'I like cat. Cat is so cute.';

var search_word = 'cat';
var regexp = new RegExp(search_word);

var matches = text.match(regexp);
console.log(matches);
// ["cat", index: 7, input: "I like cat. Cat is so cute.", groups: undefined]

上のコード例では、元の文字列を変数textに入れ、検索ワードを変数search_wordに入れてRegExpオブジェクトを作成して正規表現のパターンを用意します。

matchメソッドにパターンを渡して実行し、得られた結果を変数matchesに入れて出力します。
なお、gフラグを指定して全件検索にした場合、次のように戻り値が変わるため注意してください。

コード例

var text = 'I like cat. Cat is so cute.';

var search_word = 'cat';
var regexp = new RegExp( search_word, 'gi');

var matches = text.match(regexp);
console.log(matches);
// (2) ["cat", "Cat"]

上記の例では正規表現のパターンを作成する際に、全件検索をするgフラグに加えて、大文字／小文字の区別をしないiフラグを追記しています。
このフラグを指定することで、「Cat is so cute.」の「Cat」も検索にヒットするようになります。

マッチした結果を出力してみると、変数matchesにはマッチした文字列だけが入っていることが分かります。
何件マッチしたかは分かりますが、単発で検索したときのような詳細なデータは取得できません。
もし全件検索を行いつつ、マッチした文字列の詳細を取得したい場合は次のmatchAllメソッドを使用してください。

matchAllメソッドの使い方

matchAllメソッドはパターンにマッチする文字列を全て検索し、マッチした文字列の情報をRegExpStringIteratorで返します。
パターンにはgフラグの指定が必須です。

コード例

var text = 'I like cat. Cat is so cute.';

var search_word = 'cat';
var regexp = new RegExp( search_word, 'gi');

var matches = text.matchAll(regexp);
for (var match of matches) {
  console.log(match);
}
// ["cat", index: 7, input: "I like cat. Cat is so cute.", groups: undefined]
// ["Cat", index: 12, input: "I like cat. Cat is so cute.", groups: undefined]

上のコード例では、元の文字列を変数textに入れ、検索ワードを変数search_wordに入れてRegExpオブジェクトを作成して正規表現のパターンを用意します。
パターンの作成時に必須となるgフラグの指定と、大文字／小文字を区別しない検索を行うiフラグを指定しているところもポイントです。（iフラグは必須ではありません）

matchAllメソッドを実行してマッチした情報を変数matchesに取得し、その後にfor文で結果を出力しています。
RegExpStringIteratorはイテレータなので、for文などのループ処理でアクセスすることで、格納されている配列データにアクセスすることができます。

matchAllメソッドはパターンにマッチする文字列が見つからなくても空のRegExpStringIteratorを返します。

searchメソッドの使い方

searchメソッドはパターンにマッチする文字列を検索し、最初にマッチした文字列の開始位置を返します。

コード例

var text = 'I like cat. Cat is so pretty. Black cat, White cat, Brown cat.';

var search_word = 'cat';
var regexp = new RegExp(search_word);

var matches = text.search(regexp);
console.log(matches);
// 7

上のコード例では、元の文字列を変数textに入れ、検索ワードを変数search_wordに入れてRegExpオブジェクトを作成して正規表現のパターンを用意します。

searchメソッドはgフラグを指定しても先頭にマッチした文字列の開始位置しか取得することができないため、シンプルにパターンにマッチする文字列があるかどうかを判断する用途で使用します。

replaceメソッドの使い方

replaceメソッドはパターンにマッチする文字列を、第2パラメータで指定した文字列に置き換えます。
置き換えた後の文字列を返します。
なお、置き換えを実行しても元の文字列には影響しません。

コード例

var text = 'I like cat. Cat is so pretty. Black cat, White cat, Brown cat.';

var search_word = 'cat';
var regexp = new RegExp( search_word, 'gi');

var result = text.replace( regexp, 'dog');
console.log(result);
// I like dog. dog is so pretty. Black dog, White dog, Brown dog.

上のコード例では、元の文字列を変数textに入れ、検索ワードを変数search_wordに入れてRegExpオブジェクトを作成して正規表現のパターンを用意します。
gフラグでマッチした文字列を全て置き換える指定をして、iフラグでは大文字／小文字の区別をせずに置き換えるように指定しています。

replaceメソッドにパターンを渡し、第2パラメータに置き換える文字列「dog」を渡して置き換えを実行します。
置き換えた後の文字列を出力すると、「cat」や「Cat」などが全て「dog」に置き換わっていることが分かります。

spliltメソッドの使い方

spliltメソッドはパターンにマッチする文字列で、元の文字列を分割します。
分割した後の文字列を配列形式で返します。
repalceメソッドと同様に、分割を実行しても元の文字列には影響しません。

以下の例では文字列を「.（ドット）」で分割します。

コード例

var text = 'I like cat. Cat is so pretty. Black cat, White cat, Brown cat.';

var search_word = '[\.]';
var regexp = new RegExp( search_word);

var result = text.split(regexp);
console.log(result);
// (4) ["I like cat", " Cat is so pretty", " Black cat, White cat, Brown cat", ""]

「.」は特殊文字として定義されているため、通常の文字として扱うために「\.」でエスケープする必要があります。
その文字列を渡してRegExpオブジェクトでパターンを作り、splitメソッドで文字列の分割を行っています。
結果を出力すると、元の文字列が4つに分割されていることが分かります。

こちらの記事は役に立ちましたか？

コメントありがとうございます！
運営の参考にさせていただきます。