基於JS正則實現模板數據動態渲染

最近業務上須要動態渲染模板數據：

1、業務需求：

1.前端後端定義好模板以及變量名，保存數據庫

2.訂單數據是前端根據支付結果獲取的，最終渲染完的數據模板須要調用打印機打印出來

3.由於模板相對商家以及打印機來講比較固定，每次登陸後會查詢一次模板緩存前端，後續每次支付動態渲染數據便可

2、實現思路：

1.須要渲染數據的模板，以${變量名}區分：

var t="銀行：${bankName}，商家名稱：${merchantName}，訂單號：${orderNum}";

2.正則匹配獲取全部變量名

var keys=[];
var arr = t.match(/\$\{(.*?)\}/g);
for(var key in arr){
    var s=arr[key].replace("${","").replace("}","");
    keys.push(s);
}
alert(keys);

3.組裝訂單數據，注意變量屬性名與模板裏的變量名要保持一致

var order={
 "bankName": "工行",
 "merchantName": "小賣部",
 "orderNum": "123456"
};

4.渲染數據

for(var i=0;i<keys.length;i++){
  var key=keys[i];
  var value=order[key];
 t= t.replace("${"+key+"}",value);
}
alert(t);

5.查看效果：