JavaScriptで特定の文字（#）で囲まれた複数のテキストを一括置換する方法

JavaScriptでは、正規表現とreplace()メソッドを組み合わせることで、特定の記号で囲まれた複数のテキストを一度に別の値へ置き換えることができます。本記事では、特殊文字「#（ハッシュ）」で囲まれたプレースホルダーを、実際の値にまとめて置き換える方法を解説します。

対象となる文字列

たとえば、以下のように一部のテキストが「#」で囲まれた文字列があるとします。

var values = "My Name is #yourName# and I got #marks# in JavaScript subject";

このままでは「#yourName#」「#marks#」はプレースホルダー（仮の値）です。これらを実際の名前や点数など、有効な値に置き換えたいケースはよくあります。

置換の考え方

置き換えたい値をあらかじめ配列として用意し、replace()のコールバック関数内でshift()を使って先頭から順番に取り出していくのがポイントです。こうすることで、マッチした順序どおりに値を割り当てられます。

サンプルコード

var values = "My Name is #yourName# and I got #marks# in JavaScript subject";
const originalValue = ["David Miller", 97];
var result = values.replace(/#([^#]+)#/g, _ => originalValue.shift());
console.log(result);

コードの解説

• /#([^#]+)#/g：「#」で囲まれた部分をすべて検索する正規表現です。[^#]+は「#以外の1文字以上」という意味で、gフラグにより文字列全体から繰り返しマッチさせます。
• _ => originalValue.shift()：マッチするたびにコールバック関数が呼ばれ、配列originalValueの先頭要素が取り出されて置き換えに使われます。

プログラムの実行方法

上記のプログラムを実行するには、Node.js環境で次のコマンドを使用します。ここではファイル名をdemo298.jsとして保存しています。

node demo298.js

実行結果

コンソールには以下のように出力され、「#」で囲まれた部分が実際の値に置き換えられていることが確認できます。

PS C:\Users\Amit\javascript-code> node demo298.js
My Name is David Miller and I got 97 in JavaScript subject

まとめ

正規表現のグローバルマッチとreplace()のコールバック、そしてshift()による配列からの値取得を組み合わせれば、「#」などの特定の記号で囲まれた複数のテキストを簡単かつ柔軟に一括置換できます。テンプレート文字列への動的な値の埋め込みなどにも応用できる便利なテクニックです。