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

JavaScriptの「/i」フラグとは？大文字・小文字を区別せずに置換する方法を解説

JavaScriptは大文字と小文字を区別する（case sensitive）言語です。そのため、文字列の中である単語を別の単語に置き換える場合、アルファベットが大文字なのか小文字なのかを意識する必要があります。単語が1つだけなら確認は簡単ですが、置換対象の単語が多数あるケースでは、いちいち大文字・小文字を判定していては非効率です。

こうした問題を簡単に解決してくれるのが、正規表現の「/i」フラグです。「i」は「ignore case（大文字小文字を無視する）」の略で、このフラグを使うと、元の文字列内の大文字・小文字に関係なく、すべての該当単語を指定した単語に置き換えることができます。

「/i」フラグなしの場合の例

次の例では、文中に出てくるすべての blue を red に置き換えようとしています。しかし、「/i」フラグを使っていないため、大文字の「Blue」だけは置換されず、小文字の「blue」のみが「red」に変更されます。

<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」にはマッチしません。ここではすべての出現箇所を置換するために「g」（global：グローバル検索）フラグも併用していますが、それでも大文字は対象外のままです。

「/i」フラグを使用した場合の例

次に、「/i」フラグを追加してみましょう。すると、大文字・小文字の違いに関係なく、文中のすべての「blue」「Blue」が「red」に置き換わります。

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

出力結果

Mr red has a red house and a red car

まとめ

JavaScriptの正規表現における主なフラグの役割は以下のとおりです。

  • /i フラグ： 大文字・小文字を区別せずにマッチングを行う
  • /g フラグ： 文字列全体から一致するすべての箇所を対象にする（指定しない場合は最初の1件のみ）

ユーザー入力や外部データなど、大文字・小文字の表記ゆれが想定されるテキストを扱う場面では、「/i」フラグを活用することで、意図しない置換漏れを防ぎ、コードをシンプルかつ堅牢にすることができます。

  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を使用しない場合（デフォルトの動作）サ