JavaScript 正規表現

概要: このチュートリアルでは、JavaScript の正規表現について学習します。チュートリアル終了後には、文字列の検索と置換に正規表現を効果的に使用する方法がわかるようになります。

JavaScript における正規表現の概要

正規表現とは、メールアドレスや電話番号などのパターンを記述する文字列です。

JavaScript では、正規表現はオブジェクトです。JavaScript は、正規表現を効果的に操作できる組み込みの RegExp 型を提供します。

正規表現は、パターンに一致する文字列を検索および置換するのに役立ちます。正規表現には多くの便利なアプリケーションがあります。

たとえば、正規表現を使用して、Webスクレイピングで製品価格などの有用な情報を抽出できます。さらに、正規表現を使用してフォームフィールドを検証できます。

正規表現の作成

JavaScript で正規表現を作成するには、パターンの前後にスラッシュ文字 (/) を付けて囲みます。

let re = /hi/;Code language: JavaScript (javascript)

正規表現は、通常の文字列のように単一引用符または二重引用符で囲まれていないことに注意してください。

または、RegExp コンストラクターを使用して正規表現を作成することもできます。

let re = new RegExp('hi');Code language: JavaScript (javascript)

どちらの正規表現も RegExp 型のインスタンスです。文字列 'hi' に一致します。

一致のテスト

RegExp オブジェクトには多くの便利なメソッドがあります。その1つは、文字列に正規表現のパターンに一致するものが含まれているかどうかをテストできる test() メソッドです。

文字列引数に一致が含まれている場合、test() メソッドは true を返します。

次の例では、test() メソッドを使用して、文字列 'hi John' がパターン hi に一致するかどうかをテストしています。

let re = /hi/;
let result = re.test('hi John');

console.log(result); // trueCode language: JavaScript (javascript)

パターンフラグの使用

RegExp オブジェクトは、パターンの他に、オプションのフラグパラメータも受け入れます。フラグは、検索動作を変更する設定です。正規表現には多くのフラグがあります。このチュートリアルでは、一般的に使用されるフラグについて説明します。

1) 無視フラグ (i)

i フラグは、検索時に大文字と小文字を区別しません。 I は ignore case（大文字小文字の無視）の略です。 i フラグを使用すると、正規表現エンジンは大文字と小文字を区別しない検索を実行します。これは、小文字と大文字の両方に一致することを意味します。

デフォルトでは、正規表現エンジンは大文字と小文字を区別する検索を実行します。たとえば、/hi/ 正規表現は文字列 hi には一致しますが、Hi には一致しません。

文字列 hi、Hi、または HI のいずれかを検索するには、正規表現 /hi/i に i フラグを追加します。

const re = /hi/i;
const result = re.test('Hi John');

console.log(result); // trueCode language: JavaScript (javascript)

この例では、/hi/i は文字列 hi、Hi、HI のいずれにも一致します。フラグ i は最後のスラッシュ文字 (/) の後に配置することに注意してください。

次の例は、RegExp コンストラクターでフラグを使用する方法を示しています。

let re = new RegExp('hi','i');
let result = re.test('HI John');

console.log(result); // trueCode language: JavaScript (javascript)

2) グローバルフラグ (g)

もう1つのよく使用されるフラグは、グローバルフラグ (g) です。 g フラグなしで正規表現を使用すると、RegExp オブジェクトは文字列内の一致をチェックしますが、最初の一致が見つかったら停止します。

ただし、g フラグを使用すると、RegExp は文字列全体を検索してすべての一致を見つけ、すべての一致を返します。

フラグを組み合わせて、より柔軟な検索を実行することもできます。たとえば、gi フラグは大文字小文字に関係なく文字列内のすべての一致を見つけます。

RegExp の exec() メソッドは、文字列内の一致を検索し、一致に関する詳細情報を含む配列を返します。

一致が見つからない場合、exec() メソッドは null を返します。ただし、一度に1つの一致のみを返します。文字列内のすべての一致を取得するには、通常はループ内で exec() メソッドを複数回呼び出す必要があります。

次の例では、exec() メソッドと do...while ループを使用して、すべての一致を返しています。

let message = 'Hi, are you there? hi, HI...';
let re = /hi/gi;

let matches = [];
let match;
do {
    match = re.exec(message);
    if(match) {
      matches.push(match);
    }
} while(match != null)

console.dir(matches);Code language: JavaScript (javascript)

出力

仕組み

• まず、検索に使用する message 文字列を宣言します。
• 次に、パターン /hi/gi を使用して正規表現オブジェクトを作成します。無視フラグ (i) を使用すると、re オブジェクトは検索の実行時に大文字小文字を無視し、グローバルフラグ (g) は re オブジェクトに最初の一致だけでなく、すべての一致を見つけるように指示します。
• 3番目に、一致が見つからなくなるまで exec() メソッドを実行します。
• 最後に、結果の配列をコンソールに表示します。

文字列の検索

メソッド str.match(regexp) は、文字列 str 内の regexp のすべての一致を返します。

すべての一致を見つけるには、グローバルフラグ (g) を使用します。大文字小文字に関係なく一致を見つけるには、無視フラグ (i) を使用します。

次の例は、match() メソッドを使用する方法を示しています。

let str = "Are you Ok? Yes, I'm OK";
let result = str.match(/OK/gi);

console.log(result);Code language: JavaScript (javascript)

出力

["Ok", "OK"]Code language: JavaScript (javascript)

文字列の置換

次の例では、文字列の replace() メソッドを使用して、文字列 str 内の文字列 'Ok' の最初の出現箇所を置換しています。

const str = "Are you Ok? Yes, I'm OK";
const result = str.match(/OK/gi);

console.log(result);Code language: JavaScript (javascript)

出力

Are you fine? Yes, I'm OKCode language: JavaScript (javascript)

OK のすべての出現箇所を置換するには、グローバルフラグ (g) を使用した正規表現を使用します。

let str = "Are you OK? Yes, I'm OK.";
let result = str.replace(/OK/g,'fine');

console.log(result);Code language: JavaScript (javascript)

出力

Are you fine? Yes, I'm fine.Code language: JavaScript (javascript)

次の例では、無視フラグとグローバルフラグの両方を使用して、大文字小文字に関係なく OK のすべての出現箇所を文字列 `fine` に置き換えています。

let str = "Are you Ok? Yes, I'm OK.";
let result = str.replace(/OK/gi,'fine');

console.log(result);Code language: JavaScript (javascript)

出力

Are you fine? Yes, I'm fine.Code language: JavaScript (javascript)

まとめ

• /pattern/ または RegExp コンストラクターを使用して正規表現を作成します。
• 無視 (i) フラグとグローバル (g) フラグを使用して、一致動作を変更します。
• RegExp.test() メソッドを使用して、文字列内にパターンが見つかるかどうかを判断します。
• RegExp.exec() メソッドを使用して、一致を見つけ、一致の情報を含む配列を返します。
• String.match() メソッドを使用して、文字列内のあるパターンのすべての一致を見つけます。
• String.replace() メソッドを使用して、文字列内の正規表現に一致するテキストを置換します。