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

JavaScript正規表現の「/g」フラグとは？文字列をグローバルに置換する方法を解説

正規表現の/gフラグは、文字列操作を効率化するための重要なオプションの一つです。/g（global）を付けると、指定した単語を文字列全体からグローバル（全件）に検索できます。文中に登場するすべての該当語を別の単語に一括置換したい場合に、このフラグが活躍します。本記事では、その基本的な使い方をサンプルコード付きでわかりやすく解説します。

/gフラグなしの場合の挙動

次の例では、文中に含まれるすべての「blue」を「red」に置き換えたいとします。まず、通常のstr.replace()メソッドを使った場合を見てみましょう。グローバル指定がないため、最初に出現した「blue」のみが「red」に置き換えられ、残りの出現箇所は元のまま維持されます。なお、JavaScriptは大文字と小文字を区別する言語である点にも注意してください。

サンプルコード

<html>
<body>
<script>
    var str = "Mr Blue has a blue house and a blue car";
    var res = str.replace(/blue/, "red");
    document.write(res);
</script>
</body>
</html>

出力結果

Mr Blue has a red house and a blue car

このように/gフラグを指定しない場合、先頭に近い「blue」だけが置き換えられ、「a blue car」の部分は変化していません。また、大文字で始まる「Blue」も小文字のパターンには一致しないため、そのまま残ります。

/gフラグありの場合の挙動

一方、次の例ではグローバル指定（/g）を使用しているため、文中のすべての「blue」が「red」に置き換えられます。ここでも、JavaScriptが大文字と小文字を区別する言語である点に留意してください。

サンプルコード

<html>
<body>
<script>
    var str = "Mr Blue has a blue house and a blue car";
    var res = str.replace(/blue/g, "red");
    document.write(res);
</script>
</body>
</html>

出力結果

Mr Blue has a red house and a red car

大文字・小文字を区別せず置換するには

「Blue」と「blue」の両方をまとめて置換したい場合は、大文字小文字を無視する/iフラグを組み合わせて/blue/giと指定します。こうすることで、文中のすべての「Blue」「blue」が一括で「red」に置き換えられます。

  1. JavaScript DOMとは？基本の仕組みと要素の取得方法をわかりやすく解説

    JavaScriptのDOM（Document Object Model：ドキュメントオブジェクトモデル）は、Webページ上のHTML要素を表現する仕組みです。DOMはインターフェースとして機能し、ページのコンテンツやスタイルを変更することで、Webページを自由に操作できるようにします。 DOMにアクセスするには、Webページ上で右クリックして「検証（Inspect）」を選択します。すると画面の右側または左側にパネルが表示され、現在閲覧しているページのHTML要素を確認できます。要素にマウスカーソルを合わせると、ページ上の該当部分がハイライトされるため、どの要素がページのどのセクションに対応

  2. JavaScriptのSymbol.isConcatSpreadableとは？配列の連結時の展開動作を制御する方法

    Symbol.isConcatSpreadableとはSymbol.isConcatSpreadableは、ES6（ECMAScript 2015）で導入されたウェルノウンシンボルの一つで、Array.prototype.concat()メソッドを使用する際に、対象のオブジェクトをその配列要素として展開（フラット化）するかどうかを制御するために使われます。このプロパティがfalseに設定されている場合、配列の展開は一切行われません。デフォルト値はtrueであるため、明示的に指定しない限り、配列は常に展開されて連結されるという点に注意が必要です。Symbolを使用しない場合（デフォルトの動作）サ