js实现简易版 替换模板中对应变量

替换模板的变量:

js实现简易 替换模板中对应变量

案例如下

1 定义script模板

<script id='tpl' type="text/template">
  <div id="$id$">
    名字:$name$
    年龄:$age$
  </div>
</script>

2 给String原型添加方法

该方法用来:替换模板中变量对应的值

String.prototype.replaceTpl=function(objData){
  return this.replace(/\$\w+\$/ig, function(matVal){
    var res=objData[matVal.replace(/\$/g, "")];
    return res ? res : "";  
  });
};

3 使用

var oTpl=document.getElementById("tpl");
var strTpl=oTpl.innerHTML.trim();
var objData={'id':'box','name':'小王','age':'20'};
console.log( strTpl.replaceTpl(objData) );//打印替换结果

替换后的结果图

结束