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

JavaScriptで正規表現のマッチ結果をループ処理する方法

はじめに

JavaScriptでは、match()メソッドとグローバルフラグ（/g）を組み合わせることで、文字列内のすべての正規表現マッチ結果を取得し、それらをループ処理することができます。本記事では、実際のコード例を通じてその実装方法を解説します。

コード例

以下は、JavaScriptで正規表現のマッチ結果をループ処理するサンプルコードです。この例では、文章の中で「at」で終わる単語をすべて検索しています。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
   body {
      font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
   }
   .result,
   .sample {
      font-size: 18px;
      color: blueviolet;
      font-weight: 500;
   }
   .sample {
      color: red;
   }
</style>
</head>
<body>
<h1>Looping over regex matches</h1>
<div class="sample">
There is a cat lying besides the cricket bat and chasing the rat
</div>
<div class="result"></div>
<button class="Btn">CLICK HERE</button>
<h3>Click on the above button to match words ending with 'at' in the above
sentence</h3>
<script>
   let BtnEle = document.querySelector(".Btn");
   let resEle = document.querySelector(".result");
   let sampleEle = document.querySelector(".sample");
   let text = sampleEle.innerHTML;
   BtnEle.addEventListener("click", () => {
      text.match(/at/g).forEach((element) => {
         resEle.innerHTML += 'Found a match ending with "at" <br>';
      });
   });
</script>
</body>
</html>

コードの解説

このコードのポイントは以下のとおりです。

  • 正規表現 /at/g：末尾の「g」はグローバルフラグを意味します。これを指定しないと、最初の1件しかマッチせず、すべての一致を取得できません。
  • match()メソッド：対象の文字列に対して呼び出すと、グローバルフラグが付いている場合は、マッチしたすべての部分文字列を配列として返します。
  • forEach()メソッド：返された配列をループ処理し、マッチが見つかるたびに結果を画面に出力します。

この例では、サンプル文「There is a cat lying besides the cricket bat and chasing the rat」の中には、「cat」「bat」「rat」という3つの単語が含まれており、それぞれに「at」が含まれているため、3件のマッチが検出されます。

実行結果

ページを読み込むと、赤色で表示されたサンプルテキストと「CLICK HERE」ボタンが表示されます。

JavaScriptで正規表現のマッチ結果をループ処理する方法

「CLICK HERE」ボタンをクリックすると、以下のように「at」で終わる単語のマッチ数に応じたメッセージが表示されます。

JavaScriptで正規表現のマッチ結果をループ処理する方法

このように、match()メソッドとforEach()を組み合わせることで、正規表現に一致したすべての箇所を簡単にループ処理できます。より高度な処理が必要な場合は、matchAll()メソッドやRegExp.exec()を使う方法もありますので、用途に応じて使い分けるとよいでしょう。

  1. JavaScriptの正規表現を使ってABC-1234形式の文字列を作成する方法

    JavaScriptの正規表現を利用すると、「ABC1234」のような英数字の文字列を「ABC-1234」のようにハイフンで区切った読みやすい形式へ変換できます。以下に、実際に動作するサンプルコードを示します。 コード例 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale

  2. JavaScriptにおける継承の基本を具体例で解説

    JavaScriptは、クラスベースではなくプロトタイプベースのオブジェクト指向言語です。そのため、継承はprototype（プロトタイプ）オブジェクトを通じて実現されます。コンストラクタ関数のprototypeプロパティにメソッドやプロパティを追加すると、そのコンストラクタから生成されたすべてのインスタンスが、それらを共有して利用できるようになります。 プロトタイプによる継承の仕組み JavaScriptでは、インスタンスからプロパティやメソッドが参照されるとき、まずオブジェクト自身を検索し、見つからなければプロトタイプチェーンをたどって上位のオブジェクトへと探しに行きます。これにより、各イ