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

JavaScriptのmatch()メソッドとは？正規表現で文字列を検索する方法を実例付きで解説

JavaScriptのmatch()メソッドは、文字列に対して正規表現によるパターンマッチングを実行し、一致する箇所が見つかった場合にその結果を配列オブジェクトとして返すメソッドです。文章中から特定のパターンに該当する部分をすべて抽出したい場合などに活用できます。

match()メソッドの基本構文

string.match(regexp)

引数には検索に使用する正規表現を指定します。正規表現に「g」フラグを付けると、文字列内のすべての一致結果が配列に格納されて返されます。なお、一致するものが見つからなかった場合は「null」が返される点に注意してください。

match()メソッドの使用例

以下は、JavaScriptのmatch()メソッドを使って、文字列内から「ing」というパターンを検索するサンプルコードです。

サンプルコード

<!DOCTYPE html>
<html lang="en">
<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;
   }
   .sample,
   .result {
      font-size: 18px;
      font-weight: 500;
      color: red;
   }
</style>
</head>
<body>
<h1>JavaScript match()</h1>
<div class="sample">The king bought an expensive ring.</div>
<div style="color: black;" class="result"></div>
<div style="font-weight: bold; color: black;" class="result"></div>
<button class="Btn">CLICK HERE</button>
<h3>
Click on the above button to search 'ing' in the above string
</h3>
<script>
   let sampleEle = document.querySelector(".sample");
   let resultEle = document.querySelector(".result");
   let result = sampleEle.innerHTML.match(/ing/g);
   document.querySelector(".Btn").addEventListener("click", () => {
      resultEle.innerHTML = "Match found : " + result;
   });
</script>
</body>
</html>

このコードでは、表示されている英文「The king bought an expensive ring.」に対して、「/ing/g」という正規表現でmatch()メソッドを実行しています。gフラグが付いているため、文中にある「ing」に該当するすべての箇所が検索対象となります。

出力結果

JavaScriptのmatch()メソッドとは？正規表現で文字列を検索する方法を実例付きで解説

画面上の「CLICK HERE」ボタンをクリックすると、以下のように検索結果が表示されます。

JavaScriptのmatch()メソッドとは？正規表現で文字列を検索する方法を実例付きで解説

この例では、「king」と「ring」のそれぞれに含まれる「ing」が一致したため、["ing", "ing"]という配列として結果が出力されます。このように、match()メソッドを使えば、正規表現に基づいた柔軟な文字列検索を簡単に実装できます。

  1. JavaScriptのglobalプロパティとは？正規表現の「g」修飾子の有無を判定する方法

    JavaScriptのglobalプロパティとはJavaScriptのglobalプロパティは、正規表現（RegExp）オブジェクトに「g（グローバル）」修飾子が設定されているかどうかを判定し、設定されていればtrue、されていなければfalseを返す真偽値のプロパティです。「g」修飾子が付いた正規表現は、文字列内の最初の一箇所だけでなく、一致するすべての箇所に対してマッチングを行います。globalプロパティを使えば、その設定が有効になっているかを実行時に確認できます。以下のコード例を見てみましょう。コード例<!DOCTYPE html> <html lang="

  2. JavaScriptのmultilineプロパティとは？正規表現の「m」フラグ判定方法を実例付きで解説

    JavaScriptのmultilineプロパティは、正規表現オブジェクトに「m」フラグ（複数行モードの修飾子）が設定されているかどうかを判定し、設定されていれば true、されていなければ false を返す読み取り専用のプロパティです。「m」フラグが有効な場合、「^」（行頭）や「$」（行末）が文字列全体ではなく、改行で区切られた各行の先頭・末尾にマッチするようになります。multilineプロパティを参照すれば、そのフラグが実際に設定されているかをプログラムから簡単に確認できます。multilineプロパティのサンプルコード以下は、multilineプロパティの動作を確認できるHTMLのコ