JavaScriptで文字列のすべての出現箇所を一括置換する方法

正規表現(RegEx)とreplace()メソッドを組み合わせることで、JavaScriptで文字列内の特定の単語をすべて一括置換できます。この記事では、その基本的な使い方をわかりやすく解説します。

置換が必要になるシーン

たとえば、自社の最新製品について書かれた長いテキストがあり、その中である単語が何度も誤って記述されていたとします。次のテキストは本来「Epic Games」とすべきところが、誤って「Glorious Games」と入力されてしまった例です。

const textBlock =
  "We at Glorious Games, are very proud to present the latest edition of the Unreal Tournament series. Glorious Games would like to invite our fans to come over to the Glorious Games stand at E3 in 2021."

ご安心ください。JavaScriptを使えば、このような誤りも瞬時に修正できます。

replace()メソッドと正規表現による一括置換

const textBlockCorrected = textBlock.replace(/Glorious/g, "Epic")

console.log(textBlockCorrected)
// "We at Epic Games, are very proud to present the latest edition of the Unreal Tournament series. Epic Games would like to invite our fans to come over to the Epic Games stand at E3 in 2021."

これで、テキスト内の「Glorious」がすべて「Epic」に置き換えられました。

コードの仕組み

• まず、textBlockCorrectedという新しい変数を宣言します。
• 次に、その新しい変数に元のtextBlockの値を代入します。
• そして、textBlockに対してreplace()メソッドを呼び出し、引数として正規表現/Glorious/gと置換後の文字列"Epic"を渡します。ここが処理の核心部分です。

gフラグの役割

ポイントとなるのは、正規表現に付けられたg(global)フラグです。このフラグがあることで、テキスト全体から「Glorious」に一致するすべての箇所が「Epic」に置き換えられます。

逆に言えば、gフラグを付けない場合、replace()メソッドは最初に一致した1箇所しか置き換えません。つまり、JavaScriptで文字列内の複数の一致箇所をまとめて置換したい場合、このgフラグの指定が不可欠です。

補足:replaceAll()メソッドという選択肢

なお、比較的新しいJavaScript環境では、より直感的なreplaceAll()メソッドも利用できます。

const textBlockCorrected = textBlock.replaceAll("Glorious", "Epic")

replaceAll()なら正規表現を使わずにすべての一致箇所を置換できるため、シンプルな文字列置換にはこちらの方が読みやすいコードになります。ただし、古いブラウザやNode.jsのバージョンでは対応していない場合があるため、実行環境に応じて使い分けるとよいでしょう。