JS--パターンのキャプチャグループ

パターンのキャプチャグループ

【開発環境】
OS：Win11（64ビット）
VSCode1.72.2、
クロム

【キャプチャグループの設定とキャプチャの取得】
正規表現のパターンの中でキャプチャグループを設定するには、設定したい部分を括弧()で囲んでください。

/abc(def)ghi/

括弧()のキャプチャにマッチした部分でだけを取り出すことが出来るようになる。

サンプル

let regexp = /\d{3}-(\d{4})/;

let result = regexp.exec('郵便番号は 123-4567 です。');
console.log(result[0]);
> 123-4567
console.log(result[1]);>4567

【キャプチャを行わないキャプチャグループを設定する】
キャプチャを利用する予定がない場合で、明示的にキャプチャを行いたくない場合には括弧()ではなく次のように記述することでキャプチャを行わないキャプチャグループを設定できます。

・書式
(?:パターン)

「(」と「)」で囲う代わりに「(?:」と「)」で囲います。この書式で囲んだ場合はグループ化としての機能は同じですがキャプチャは行われません。キャプチャグループの値を繰り返し処理などで順に取得したい場合などに、キャプチャが目的ではないグループに対して使用すると便利です。

サンプル

let regexp = /製品(?:Code|コード):([A-Z]{2})-(\d{2})/;
let result = regexp.exec('製品コード:AZ-07');//コードだを取得出来ない 
console.log(result[1]);
>> AZ
console.log(result[2]);
>> 07

【名前付きキャプチャグループを使用する】
JavaScript では ECMAScript 2018 (ES 9) から名前付きキャプチャグループが利用可能となりました。キャプチャグループ毎に名前を設定し、インデックスではなく名前を使ってキャプチャした値を参照することができます。

・書式
(?<グループ名>パターン)

通常のキャプチャグループでは、 String オブジェクトの match メソッドの戻り値として取得する配列に対してインデックスを指定して要素の値を参照することでキャプチャグループのキャプチャした値を参照してきました。
名前付きキャプチャグループの場合は、 match メソッドの戻り値として取得する配列に対して次のように名前を指定してキャプチャした値を参照できます。

配列.groups.グループ名

サンプル

let regexp = /製品コード:(?＜section＞[A-Z]{2})-(?＜code＞\d{2})/;

let result = regexp.exec('製品コード:JP-82');
console.log(result.groups.section);
>> JP
console.log(result.groups.code);
>> 82

【キャプチャした値と同じ値にマッチするパターン】

パターンの中でキャプチャグループを設定した場合、キャプチャグループでマッチした値を同じパターン内から参照し、既にキャプチャした値と同じ値にマッチするようにパターンに記述することができます。

参照する場合は、キャプチャ1の値を参照するには \1 、キャプチャ2の値を参照するには \2 のようにパターン内に記述します。

\キャプチャ番号

次のパターンでは 1 番目のキャプチャグループでキャプチャした値を後から参照しています。

const regexp = /(ABC).*\1/;

この場合、 ABC から始まり、任意の文字が 0 回以上続いたあと、 1 番目のキャプチャグループでキャプチャした値と同じ値が続くパターンとなります。 1 番目のキャプチャグループでキャプチャした値は ABC なので /ABC.*ABC/ というパターンと同じです。

サンプルコード

簡単なサンプルで試してみます。

const regex = /<(.+)>.*<\/\1>/;

let result = regex.exec('AAA

BBBCCCDDD

EEE');
console.log(result[0]);
>>

BBBCCCDDD

今回のサンプルでは最初に見つかったタグ(今回の場合は

)と同じ名前の閉じタグ(今回の場合は

)で囲まれた文字列にマッチしています。同じ名前の閉じタグを探すためにキャプチャした値を後から参照しています。

 

 

JS--（｜）パターンマッチについて

（｜）パターンマッチについて

【開発環境】
OS：Win11（64ビット）
VSCode1.72.2、
クロム

【複数の文字列のいずれかにマッチ(|)】

メタ文字のひとつである縦棒(|)は複数の文字列のいずれか一つに一致する文字列にマッチします。文字列の候補を縦棒(|)で区切って記述します。

文字列|文字列|...

サンプル

let regexp = /Sunday|Sun|sunday/;

console.log(regexp.test('Today is Sunday'));
>> true
console.log(regexp.test('Sunflowers are in bloom'));
>> true
console.log(regexp.test('SUNDAY MORNING'));
>> false

【複数の選択肢を括弧で囲んでグループ化する】

複数の文字列の選択肢のいずれかにマッチするパターンを記述する場合、前後に別のパターンと組み合わせる場合、そのまま記述することができません。

例えば Red か red かの選択肢で前後を単語の境界である \b を付けようとした場合、次のように書いてしまうと \bRed か re\b かの選択となってしまいます。

const regexp = /\bRed|red\b/;

そこで選択肢の部分を括弧()で囲んでグループ化します。グループ化することでどこからどこまでが選択肢の部分なのかを明確にすることができます。

const regexp = /\b(Red|red)\b/;このパターンでは単語として独立している Red か red にマッチします。

サンプル

let regexp = /\b(Red|red)\b/;  console.log(regexp.test('Red Rose'));
>> true
console.log(regexp.test('reduce the workload'));
>> false
console.log(regexp.test('Border color is red'));
>> true
console.log(regexp.test('predict a result'));
>> false

JS--直前の文字を指定回数繰り返すマッチパターン

直前の文字を指定回数繰り返すマッチパターン

【開発環境】
OS：Win11（64ビット）
VSCode1.72.2、
クロム

【直前の文字が0回以上連続する文字にマッチ（*）】
メタ文字のひとつであるアスタリスク(*)は直前の文字が 0 回以上連続する文字列にマッチします( 0 回以上というのは一度もなくてもいいし何回出てもいいという意味です)。

・サンプル

let regexp = /Ha*n/;

console.log(regexp.test('Hn'));
>> true
console.log(regexp.test('Han'));
>> true
console.log(regexp.test('Haaaaan'));
>> true
console.log(regexp.test('HaaUaan'));
>> false

【直前の文字が1回以上連続する文字にマッチする(+)】
メタ文字のひとつであるプラス(+)は直前の文字が 1 回以上連続する文字列にマッチします。

サンプル

let regexp = /Ha+n/;

console.log(regexp.test('Hn'));
>> false
console.log(regexp.test('Han'));
>> true
console.log(regexp.test('Haaaaan'));
>> true
console.log(regexp.test('HaaUaan'));
>> false

【直前の文字が0回または1回現れる文字にマッチする(?)】
メタ文字のひとつであるクエスチョンマーク(?)は直前の文字が 0 回または 1 回現れる文字にマッチします。

サンプル

let regexp = /Ha?n/;

console.log(regexp.test('Hn'));
>> true
console.log(regexp.test('Han'));
>> true
console.log(regexp.test('Haaaaan'));
>> false
console.log(regexp.test('Ham'));
>> false

【直前の文字をnum回繰り返す文字にマッチする(｛num｝）】
メタ文字のひとつである {num} は直前の文字を num 回繰り返す文字列にマッチします。

サンプル

let regexp = /Ha{2,4}n/;

console.log(regexp.test('Haan'));
>> true
console.log(regexp.test('Haaaan'));
>> true
console.log(regexp.test('Haaaaan'));//aが5回
>> false
console.log(regexp.test('HaaaO'));//最後がO>> false 

【直前のパターンを繰り返す】
ここまで解説した繰り返しを行うメタ文字は、繰り返しの対象が直前の文字だけでなく直前の別のパターンを繰り返す文字列にもマッチします。

・例文1
任意の文字を表すドット(.)の直後にアスタリスク(*)を記述すると、任意の文字を 0 回以上繰り返す文字列にマッチします。最初にが現れ、そのあとに任意の文字が 0 回以上続き、最後にが現れる文字列にマッチさせることも出来る。

const regexp = /.*＜\/p＞/;

・例文2
0 から 9 までのいずれかの文字とマッチする文字クラスの [0-9] の直後に {4} を記述すると、任意の数字が 4 回続く文字列にマッチさせることも出来る。

const regexp = /[0-9]{3}-[0-9]{4}/;

サンプル

let regexp1 = /＜em＞.*＜\/em＞/;
let str1 = '＜ｐ＞今日は＜em＞快晴の＜/em＞一日です＜/ｐ＞';

let result1 = str1.match(regexp1);
console.log(result1[0]);
>> ＜em＞快晴の＜/em＞

let regexp2 = /[0-9]{3}-[0-9]{4}/;
let str2 = '郵便番号は 123-4567 です';

let result2 = str2.match(regexp2);
console.log(result2[0]);
>> 123-4567

【グループ化したパターンを繰り返す】
ここまでは繰り返しの対象が直前の文字やパターンの場合でしたが、複数の文字やパターンを括弧()で囲んでグループ化することで、グループ化した複数の文字やパターンを繰り返す文字列にもマッチさせることができます。

例えば
const regexp = /\d{1,3}\./;
このパターン全体を 3 回繰り返すパターンなので、単に {3} を付け加えるのではなく、対象のパターン全体を括弧()で囲んでグループ化したあとで {3} を記述します。
const regexp = /(\d{1,3}\.){3}/;
これで数値が 1 つから 3 つ続いたあとにドット(.)が続く文字列を 3 回繰り返すパターンが完成です
・サンプル

let regexp = /(\d{1,3}\.){3}\d{1,3}/;
let str = 'IPアドレスは 192.168.0.18 です';

let result = str.match(regexp);
console.log(result[0]);
>> 192.168.0.18

【最大量指定子と最小量指定子】
+ や * などの量指定子はデフォルトではより多い文字列にマッチしようとします。
・サンプル

let regexp = /b.*a/;
let str = 'breakfast is sandwich';

let result = str.match(regexp);
console.log(result[0]);
>> breakfast is sa

このパターンでは b で始まり、任意の文字が 0 回以上続いたあとに a が続く文字列とマッチします。

対象の文字列の中で b のあとに a が現れるのは次の三か所があります。

breakfast is sandwich
breakfast is sandwich
breakfast is sandwich

+ や * などの量指定子を使用した時により少ない文字列にマッチさせる場合は最小量指定子を使用します。それぞれの量指定子のあとにクエスチョンマーク(?)を記述する事

*?
+?
??
{min, max}?

先ほどのサンプルを最小量指定子を使って書き直すと

let regexp = /b.*?a/;
let str = 'breakfast is sandwich';

let result = str.match(regexp);
console.log(result[0]);
>> brea今度のサンプルではマッチする候補の中で一番少ない文字列とマッチしました。

JS--先頭や末尾にマッチするパターン

先頭や末尾にマッチするパターン

【開発環境】
OS：Win11（64ビット）
VSCode1.72.2、
クロム

【文字列の先頭にマッチする（^）】
メタ文字のひとつであるキャレット(^)は文字列の先頭位置にマッチします。

・サンプル

let regexp = /^Red/;

console.log(regexp.test('Red Table'));
>> true
console.log(regexp.test('Reduce speed'));
>> true
console.log(regexp.test('Border Color is Red'));
>> false

【文字列の末尾にマッチする($)】
メタ文字のひとつであるドル記号($)は文字列の末尾位置にマッチします。

サンプル

let regexp = /Script$/;

console.log(regexp.test('JavaScript'));
>> true
console.log(regexp.test('I am studying TypeScript'));
>> true
console.log(regexp.test('PostScript is difficult'));
>> false

【単語の先頭および末尾にマッチする(\b)】 
メタ文字のひとつである \b は単語の先頭位置および末尾位置にマッチします。
・サンプル

let regexp1 = /\bwork/;←単語の先頭

console.log(regexp1.test('a working person'));
>> true
console.log(regexp1.test('Go to see fireworks'));
>> false

let regexp2 = /ing\b/;←単語の末尾位置

console.log(regexp2.test('a working person'));
>> true
console.log(regexp2.test('ingenious design'));
>> false

【単語の先頭と末尾以外にマッチする(\B)】
メタ文字のひとつである \B は単語の先頭と末尾以外の位置にマッチします。

サンプル

let regexp1 = /\Bam/;←先頭以外

console.log(regexp1.test('Difficult program'));
>> true
console.log(regexp1.test('full amount'));
>> false

let regexp2 = /am\B/;←語尾以外

console.log(regexp2.test('full amount'));
>> true
console.log(regexp2.test('Difficult program'));
>> false

JS--パターン

パターンについて

【開発環境】
OS：Win11（64ビット）
VSCode1.72.2、
クロム

【記述した文字列にマッチする】
パターンの中に文字を記述した場合は、その文字そのものとマッチします。

サンプル

let regexp = /Sun/;

console.log(regexp.test('Today is Sunday'));
>> true
console.log(regexp.test('The Sun rose'));
>> true
console.log(regexp.test('Ham Sandwich'));
>> false

Sunが文字列に含まれる場合はtrueになる。それ以外は、fals

【任意の一文字（.）】
メタ文字のひとつであるドット(.)は任意の一文字(例外あり)にマッチします。

※ ただし、次の文字にはマッチしません。

\n
\r
\u2028   # Line Separator
\u2029   # Paragraph Separator

サンプルコード

let regexp = /S..d/;//Sで始まりdで終わる4文字

console.log(regexp.test('Today is Sunday'));
> true
console.log(regexp.test('The Sun rose'));
> false
console.log(regexp.test('Ham Sandwich'));
> true

【角括弧の中の一文字】
角括弧([...])は角括弧の中に記述した複数の文字のいずれか一つにマッチさせる場合に使用するメタ文字です。

・サンプルコード

let regexp = /[sS]un/;→sunか、Sunに一致するもの

console.log(regexp.test('Today is Sunday'));
> true
console.log(regexp.test('The sun rose'));
> true
console.log(regexp.test('Ham Sandwich'));
> false

【角括弧の否定】
角括弧([...])の先頭に否定を表すキャレット(^)を記述した場合[^...]は、角括弧の中に記述した複数の文字のいずれにも一致しない場合にマッチします。

・サンプルコード

let regexp = /199[^01234]/;

console.log(regexp.test('My birthday is 1998/03/12'));
> true
console.log(regexp.test('Graduated in 1994')); > false
console.log(regexp.test('It opened in 1996'));
> true

【角括弧の範囲指定】
角括弧([...])の中でハイフン(-)を記述すると、ハイフンの左側から右側までの範囲に含まれる連続するいずれかの文字にマッチします。例えば次のように記述することができます。

[0-9]  0 から 9 までのいずれかの数値
[a-z]  a から z までのいずれかの文字
[A-Z]  A から Z までのいずれかの文字

サンプルコード

let regexp = /199[0-6]/;

console.log(regexp.test('My birthday is 1998/03/12'));
>> false
console.log(regexp.test('Graduated in 1994'));
>> true
console.log(regexp.test('It opened in 1996'));
>> true

【文字クラスの略記法】

文字クラスでは [ から ] の中に文字の範囲を記述することで多くの文字の中のいずれかの文字とマッチするパターンを記述することができますが、特によく使用するものについては略記法が用意されています。 JavaScript で利用可能な略記法は次の通りです。

\d  数字 [0-9]
\D  数字以外 [^\d]
\w  英数字とアンダーバー [0-9a-zA-Z_]
\W  英数字とアンダーバー以外 [^\w]
\s  空白文字 [ \f\n\r\t\v\u00a0\u1680\u180e\u2000-\u200a\u2028\u2029\u202f\u205f\u3000\ufeff]
\S  空白文字以外 [^\s]

\D は \d の否定のように大文字のものは小文字のものの否定になっています。

空白文字は半角スペース以外に改行(\n)やタブ(\t)など空白に相当する文字にマッチします。

例えば次の二つのパターンは同じ文字にマッチします。

const regexp1 = /[0-9]/;
const regexp2 = /\d/;

記述方法が異なるだけでマッチする文字は同じです。略記法が用意されているものについては略記法を使用することでよりコンパクトにパターンを記述することができます。

サンプルコード

簡単なサンプルで試してみます。

let str = '郵便番号は 456-7890 です';
let regexp = /\d{3}-\d{4}/;

let result = str.match(regexp);
console.log(result[0]);
>> 456-7890

【行などの特殊な文字】
改行やタブなどキーボードから入力できないような特殊な文字にマッチするパターンを記述するため、バックスラッシュ(\)と文字を組み合わせたメタ文字が用意されています。

\0        NULL
\f        改ページ
\n        改行
\r        復帰
\t        タブ
\v        垂直タブ
\cX       Ctrl + x
\xhh      16進数 hh のASCII文字
\uhhhh    16進数 hhhh で表されるUTF-16のコードユニット

また u フラグが設定されている場合は、次のメタ文字も使用できます。

\u{hhhh}
\u{hhhhh}  16進数 hhhh または hhhhh で表されるUnicodeコードポイント

サンプルコード

簡単なサンプルで試してみます。

let str = `こんにちは。
今日も寒いですね。`;
let regexp = /。\n./;

let result = str.match(regexp);
console.log(result[0]);
>>  。
>>  今