基於JS正則實現模板數據動態渲染
- 2020 年 3 月 7 日
- 筆記
最近業務上需要動態渲染模板數據，好久沒寫前端程式碼了，有點生疏，將思路簡單寫下來，防老：
一、業務需求：
-
前端後端定義好模板以及變數名，保存資料庫
-
訂單數據是前端根據支付結果獲取的，最終渲染完的數據模板需要調用印表機列印出來
-
因為模板相對商家以及印表機來說比較固定，每次登錄後會查詢一次模板快取前端，後續每次支付動態渲染數據即可
二、考點：
-
正則表達式
-
精簡程式碼量，盡量減少前端的工作量
三、實現思路：
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.查看效果：
