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

JavaScriptの正規表現修飾子(g・i・m)をサンプルコード付きで解説

JavaScriptの正規表現修飾子とは

JavaScriptの正規表現における修飾子(フラグ)とは、パターンリテラルの末尾に付加することで検索の挙動を変更できる、省略可能な指定のことです。これを使うことで、大文字と小文字を区別しない検索や文字列全体を対象としたグローバル検索などが簡単に実現できます。さらに、複数の修飾子を組み合わせて指定することも可能です。

主な修飾子の一覧

修飾子説明
gグローバルマッチングを有効にします。最初の一致で処理を止めず、マッチしたすべての結果を返します。
i大文字と小文字を区別しない(ignore case)マッチングを有効にします。
m複数行(multiline)モードを有効にします。^ と $ が、文字列全体ではなく各行の先頭・末尾に対して機能するようになります。

サンプルコード

以下は、3種類の修飾子(m・g・i)の動作を一度に確認できるサンプルです。「CLICK HERE」ボタンをクリックすると、それぞれの修飾子を使ったマッチング結果が画面に表示されます。

<!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 {
      font-size: 20px;
      font-weight: 500;
   }
</style>
</head>
<body>
<h1>JavaScript 正規表現修飾子のデモ</h1>
<div class="sample"></div>
<div style="color: green;" class="result"></div>
<button class="Btn">CLICK HERE</button>
<h3>
上のボタンをクリックすると、各修飾子が文字列に対してどのように作用するかを確認できます
</h3>
<script>
   let sampleEle=document.querySelector('.sample');
   let resEle = document.querySelector('.result');
   // 先頭に改行(\n)を含む文字列を用意
   let str = '\nHello world. This is a beautiful world';
   sampleEle.innerHTML =str;
   document.querySelector(".Btn").addEventListener("click", () => {
      // m修飾子:行頭の「Hello」にマッチさせる
      resEle.innerHTML += '/^Hello/m = ' + str.match(/^Hello/m) + '<br>';
      // g修飾子:「world」にマッチしたすべての箇所を返す
      resEle.innerHTML += '/world/g = ' + str.match(/world/g) + '<br>';
      // i修飾子:大文字小文字を無視して「WORLD」にマッチさせる
      resEle.innerHTML += '/WORLD/i = ' + str.match(/WORLD/i) + '<br>';
   });
</script>
</body>
</html>

実行結果

上記のコードをブラウザで開くと、まず次のような画面が表示されます。

JavaScriptの正規表現修飾子(g・i・m)をサンプルコード付きで解説

「CLICK HERE」ボタンをクリックすると、各修飾子によるマッチ結果が緑色のテキストとして順に追記表示されます。

JavaScriptの正規表現修飾子(g・i・m)をサンプルコード付きで解説

結果の読み方

  • /^Hello/m … 対象の文字列は改行(\n)で始まっているため、m 修飾子がないと行頭判定が働かずマッチしません。m を付けると2行目の行頭にある「Hello」にマッチします。
  • /world/g … g 修飾子により、最初の1件だけでなく、文字列中に含まれる「world」のすべての箇所(2箇所)が配列として返されます。
  • /WORLD/i … i 修飾子により、パターン側が大文字の「WORLD」であっても、元の文字列内の小文字の「world」にマッチします。

このように、修飾子を適切に組み合わせることで、同じ正規表現パターンでも柔軟に検索条件をコントロールできます。

  1. 【初心者向け】JavaScriptのfinallyステートメントをサンプルコード付きでわかりやすく解説

    finallyステートメントは、エラーが発生したかどうかにかかわらず、tryブロックとcatchブロックの処理が完了した後に必ず実行されるブロックです。ファイルのクローズやデータベース接続の切断など、処理の成功・失敗に関係なく必ず実行したい後処理（クリーンアップ処理）を記述する際に非常に便利です。finallyの基本構文try { // エラーが発生する可能性のある処理 } catch (err) { // エラー発生時に実行される処理 } finally { // エラーの有無にかかわらず必ず実行される処理 }サンプルコード以下は、JavaScriptにおけるfinallyステー

  2. 【初心者向け】JavaScriptの非同期関数（async/await）をサンプルコード付きで解説

    非同期関数（async function）とはJavaScriptの非同期関数は、asyncキーワードを付けて定義する特別な関数です。ES2017（ES8）で標準仕様に組み込まれ、従来のコールバック関数よりも簡潔で読みやすい形でPromiseを扱えるようにするために導入されました。async関数の内部ではawaitキーワードを使用できます。awaitを付けた箇所では処理の流れが一時停止し、対象のPromiseが完了（resolveまたはreject）するまで待機します。この仕組みにより、非同期処理をあたかも同期処理のような直感的なコードとして書ける点が最大のメリットです。押さえておきたいポイン