JavaScript
 Computer >> コンピューター >  >> プログラミング >> JavaScript

JavaScript正規表現で複数の一致をすべて取得する方法

JavaScriptの正規表現で文字列内の複数の一致をすべて検索したい場合は、正規表現に「g（グローバル）フラグ」を付けて、exec()メソッドをwhileループで繰り返し呼び出すのが定番の手法です。以下で具体的な実装例を紹介します。

複数の一致を取得できる仕組み

通常の正規表現マッチングでは、最初の1件しか結果が返されません。しかし、正規表現の末尾に g フラグを付けると、内部の lastIndex プロパティが更新され、exec() を呼び出すたびに次の一致が順番に取得できます。そして一致がなくなった時点で exec() は null を返すため、while ループで null になるまで処理を継続することで、すべての一致を取り出せます。

サンプルコード：URLから同名パラメータをすべて抽出

次の例では、URLのクエリ文字列に含まれる複数の demo パラメータの値を、正規表現ですべて抽出しています。

<html>
   <head>
      <script>
         var url = 'https://www.example.com/new.html?ui=7&demo=one&demo=two&demo=three four',
         a = document.createElement('a');
         a.href = url;

         // 「g」フラグを付けて、すべての一致を対象にする
         var demoRegex = /(?:^|[&;])demo=([^&;]+)/g,
         matches,
         demo = [];

         // exec() が null を返すまでループして全一致を収集
         while (matches = demoRegex.exec(a.search)) {
            demo.push(decodeURIComponent(matches[1]));
         }

         document.write(demo);
      </script>
   </head>
   <body>
   </body>
</html>

コードのポイント

  • gフラグ： 正規表現 /(?:^|[&;;])demo=([^&;;]+)/g の末尾にある g により、先頭の一致だけでなく文字列全体からすべての一致を検索できます。
  • exec() と while ループ： matches = demoRegex.exec(a.search) が一致を見つけている間はループが続き、一致が尽きた時点で null が返されてループが終了します。
  • キャプチャグループ： matches[1] には demo= の直後に続く値（例：one、two）が格納されます。
  • decodeURIComponent()： URLエンコードされた値をデコードしてから配列 demo に追加しています。

実行結果

このコードを実行すると、コンソールに次のように出力されます。

one,two,three four

補足：よりモダンな書き方（matchAll）

ES2020以降の環境では、String.prototype.matchAll() を使うと、同じことをより簡潔に安全に書けます。matchAll() はイテレータを返すため、for...of やスプレッド構文と組み合わせて全一致を扱えます。

const url = 'https://www.example.com/new.html?ui=7&demo=one&demo=two&demo=three four';
const search = new URL(url).search;

// g フラグ付きの正規表現を matchAll() に渡す
const demoValues = [...search.matchAll(/(?:^|[&;;])demo=([^&;;]+)/g)]
  .map(m => decodeURIComponent(m[1]));

console.log(demoValues); // ['one', 'two', 'three four']

なお、matchAll() を使う場合も g フラグが必要である点に注意してください。フラグがないと TypeError が発生します。

  1. JavaScriptで文字列を検索する方法【search()メソッドの使い方を解説】

    JavaScriptで文字列を検索する方法 JavaScriptで文字列の中から特定の文字列を探すには、search()メソッドを使用します。このメソッドは、引数に渡した文字列（または正規表現）が対象の文字列内で最初に一致した位置（インデックス）を返し、見つからなかった場合は -1 を返します。 以下は、JavaScriptで文字列を検索するサンプルコードです。 サンプルコード <!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8" />

  2. JavaScriptで正規表現をテスト・実行する方法｜test()とexec()の使い方

    JavaScriptでは、RegExpオブジェクトを使って正規表現を扱います。パターンが文字列にマッチするかどうかを確認するには test() メソッドを、実際にマッチした結果を取得するには exec() メソッドを使用します。この記事では、両者の違いと具体的な使い方をサンプルコード付きで解説します。 test()メソッドとexec()メソッドの違い test()メソッド： 正規表現パターンが文字列にマッチすれば true、マッチしなければ false を返すシンプルな真偽判定用メソッドです。 exec()メソッド： マッチした場合、マッチした部分文字列などを含む結果の配列を返します。マッチ