Regular Expressionの復習：String Method

Bykaori

先週Regular Expression（正規表現）の復習をしたので、今週から２週に渡って、Textの中にRegular Expressionのパターンに一致する文字列が見つかった後の操作方法について取り上げることにする。まず前半はこちらのString Methodについて見ていこう。

test()メソッド：　パターンにマッチする文字列が含まれているかどうかをbooleanで返す
match()メソッド：　マッチした部分をArrayの形で返す
matchAll()メソッド：　グループ化をしながら全てのマッチを返したいときはこちら

test()メソッド

このtestメソッドは、フォームのvalidationで見かけるようなことに使える。例えば、ユーザーに入力させたテキストに全角英数字が含まれているかTrue or Falseで判定したいとき。

const text1 = "このTextには全角英数字は含まれていません。";
const text2 = "このTextには　ＡＢＣ１２３４５ 全角英数字を含みます。";

const regex = /[Ａ-Ｚａ-ｚ０-９]/; 

console.log (regex.test(text1)) 
// Output: false （全角英数字を含まないのでFalse）
console.log (regex.test(text2)) 
// Output: true

match()メソッド

matchメソッドはテキストからRegular Expressionに一致する部分を検索し、一致した部分をArrayの形で返す。（一致する部分が1つだけでも、その一致部分は要素1つのArrayとして返される。）

const text = "I would love to visit Australia to observe platypuses, especially one with a baby platypus.";
const pattern = /\bplatypus\w*/g; // platypusで始まる単語

const matches = text.match(pattern);

console.log(matches);
// Output: ["platypuses", "platypus"]

グループ化

matchメソッドと合わせて使うと便利なものにグループ化がある。Regular Expressionでは括弧（）を使ってグループ化しておくと、一致した部分のうちのグループ化された部分だけを呼び出せる。

const text = "+1 123-456-7890";
const pattern = /(\+\d+)\s(\d+-\d+-\d+)/; 

const match = text.match(pattern);

console.log(match); // ['+1 123-456-7890', '+1', '123-456-7890', index: 0, input: '+1 123-456-7890', groups: undefined]　
console.log(match[0]); // "+1 123-456-7890"　マッチ全体
console.log(match[1]); // "+1" (国コード)　グループ化１つ目
console.log(match[2]); // "123-456-7890" (ローカル番号)　グループ化２つ目

なんかconsole.log(match)したら色々含まれてる！
グループ化すると、グループ部分だけをArrayのインデックスを指定して抽出可能になる。これは使えそうだ。

しかしマッチするパターンが複数あってもいいようにgフラグを追記してみたところ、２つ目の電話番号には無反応だし、match[1]、match[2]はundefinedという。なんで？？

const text = "+1 123-456-7890とか、+2 345-678-9101とか複数のマッチに対応するため、gフラグをつけてみる";
const pattern = /(\+\d+)\s(\d+-\d+-\d+)/g; 

const match = text.match(pattern);

console.log(match); //  ["+1 123-456-7890"]
console.log(match[0]); // "+1 123-456-7890"
console.log(match[1]); // undefined
console.log(match[2]); // undefined

調べたところ、match()メソッドを使うとき、gフラグの有無によって、返ってくる値が変わるらしい。

g フラグがあった場合は、正規表現全体に一致したすべての結果を返しますが、キャプチャグループは返しません。
g フラグがなかった場合、最初に完全に一致したものと、それに関するキャプチャグループを返します。この場合、match() は RegExp.prototype.exec() と同じ結果になります（追加のプロパティ付きの配列）。

MDN

そうか、ではgフラグを使いたい時（＝２つ以上のマッチがありそうな時）はグループ化は使えないのかな？と思ったがちゃんといいものが用意されていた。

matchAll()メソッド

ループの形でパターンに一致する全ての文字列の情報を取得できた。グループ化した部分もちゃんとArrayに入ってる。注意点としては、matchAllを使うときは必ずgフラグをつけないと、Errorになるので、忘れないように。

const text = "+1 123-456-7890とか、+2 345-678-9101とか複数のマッチに対応するため、gフラグをつけてみると？";
const pattern = /(\+\d+)\s(\d+-\d+-\d+)/g; 

const matches = [...text.matchAll(pattern)];

for (const match of matches) {
  console.log(match);
}

  //Output: 
  //['+1 123-456-7890', '+1', '123-456-7890', index: 0, input: '+1 123-456-7890とか、+2 345-678-9101とか複数のマッチに対応するため、gフラグをつけてみると？', groups: undefined]
  //['+2 345-678-9101', '+2', '345-678-9101', index: 18, input: '+1 123-456-7890とか、+2 345-678-9101とか複数のマッチに対応するため、gフラグをつけてみると？', groups: undefined]

次回もString Methodについて見ていくよ！

また来週〜！

暑さも和らいできて、勉強の秋！
そんなわけで今週末は資格試験が２つ💦
TOEICとITパスポートを受けてきます。
というのも先日履歴書を書いていて、TOEICは10年以上前に受けたのが最後だし、
IT系の資格を何も持たずにIT系の仕事探すのもなと思ったので、受けることにしました。

類似投稿