JavaScriptで正規表現の一致に基づいてデータを動的に置き換える方法

テンプレート文字列内の {{placeholder}} 形式のプレースホルダーを、実際のデータで動的に置き換えたいケースはよくあります。JavaScriptでは、replace() メソッドに正規表現とコールバック関数を組み合わせることで、この処理をシンプルに実装できます。

実装例

以下のコードでは、正規表現 /\{\{(.+?)\}\}/g を使って文字列中のすべての {{...}} を検索し、対応するオブジェクトの値に置き換えています。

var temp = `My name is {{fullName}} I live in {{countryName}}`;
var details = {
    "fullName": "David Miller",
    "countryName": "AUS"
}
replaceName = temp.replace(
    /\{\{(.+?)\}\}/g,
    (matching, value) => details[value.trim()]
);
console.log(replaceName);

コードのポイント

• パターン \{\{(.+?)\}\}：波括弧 {{ }} で囲まれた部分に一致します。中身の (.+?) は「最短一致（レイジーマッチ）」なので、複数のプレースホルダーがあっても正しく個別に抽出されます。
• フラグ g：グローバル検索を意味し、文字列内のすべての一致箇所が置換対象になります。
• コールバック関数：第2引数 value には括弧でキャプチャされたキー名が渡されます。trim() で前後の空白を取り除いてから、details オブジェクトから対応する値を取得しています。

プログラムの実行方法

上記のプログラムを実行するには、次のコマンドを使用します。

node fileName.js

ここでは、ファイル名を demo256.js として保存しています。

出力結果

コンソールには次のように出力され、プレースホルダーが実際の値に置き換えられていることが確認できます。

PS C:\Users\Amit\javascript-code> node demo256.js
My name is David Miller I live in AUS

この手法は、メール文面の差し込みや動的なHTML生成など、テンプレートベースの文字列置換全般に応用できるため、覚えておくと非常に便利です。