JavaScriptプログラム中でHTMLコードを生成するときに、変数と文字列の「+」の連結でゴチャゴチャになることを避けるためにつくってみました。エスケープとかはしていないけれど紹介します。
関数本体
function bind(template, json) {
var code = template;
var keys = Object.keys(json);
var rg, key;
for(var i = 0; i < keys.length; i++) {
key = keys[i];
rg = new RegExp("{" + key + "}", "gi");
code = code.replace(rg, json[key]);
}
return code;
}
使い方
キーワードを{と}で括ると置換対象と認識されます。キーワードは第二引数のJSONのkeyと対応しており、JSONでのvalueが置換後の値になります。JSONオブジェクトは複数のKey-Valueペアを持つことができるため、第一引数のHTMLテンプレートでも複数の置換対象キーワードを埋め込むことができます。例えば、以下のようにして使います。
bind("今年は<b>{year}</b>年です{face}",
{year: new Date().getFullYear(), face: "(^o^)"}
);
これを実行すると、文字列
今年は<b>2014</b>年です(^o^)
が得られます。あとはinnerHTMLなどで表示すればOKです。
