【正则替换】形如{{name}}渲染(类似vue填充)【转】

原题链接https://segmentfault.com/q/1010000009604162

 Q:如何将双大括号{{ }}里的包括字符串替换成真正的值？

var str="姓名：{{name}},性别：{{gender}},年龄：{{age}}";
var data={name:"小红",gender:"女",age:2};

//最优解
var render=(str,data)=>str.replace(/{{(\w+)}}/g),(t1,t2)=>data[t2])

//理解最佳
function render1(str,data){
    var reg=/{{([^}]+)?}}/g;
    str.match(reg).forEach(function(val){
        str=str.replace(val,data[val.substring(2,val.length-2)])
    });
    console.log(str);
}
render1(str,data);

//注意正则有g的区别

function render2(str,data){
    var reg=/{{([^}]+)?}}/;
    var match='';
    while(match=reg.exec(str)){
      str=str.replace(match[0],data[match[1]]);
    }
    console.log(str)
}
render2(str,data);

//....

function render3(str, data){
  var re = /{{([^}]+)?}}/g;
  return str.replace(re, function($0, $1, $2){
    if( $1 in data ){
      return data[$1];
    }else{
      return "[DATA."+ $1.toUpperCase() + "]";    //如果没有，提示标签错误
    }
  });
}
console.log(render3(str,data)); //姓名：小红,性别：女,年龄：2
console.log(render3(str,{age:1234}));// 姓名：[DATA.NAME],性别：[DATA.GENDER],年龄：1234