替换多次出现的动态字符串？

Question

不确定我是否可以在标题中更好地解释，但在这里解释得更好。我正在尝试创建一个充当简单“模板”的函数。我给它一个带有某些标签“{{name}}”的字符串，它会用某个字符串替换它。

这是我目前所拥有的：

调用函数：

loadTemplate("<div>{{name}}, {{anotherString}}</div>", {
    name: "Hunter",
    anotherString: "is amazing!!!!" 
});

功能：

// Created this to make my life easier :)
function loadTemplate(template, data) {
    var tags = template.split("{{").pop().split("}}").shift();
    console.log(tags); // This only gives me the last occurrence.
}

如何循环遍历字符串中所有出现的 {{variable}} 以便将其替换为相关数据？

类似于Handlebars.js（我想要一个超级轻量级​​和快速的功能，而不是一个完整的插件）

Answer 1

对data 对象中的每个键进行搜索/替换：

function loadTemplate(template, data) {
  var RE, d;
  for(d in data) {
    RE= new RegExp('{{'+d+'}}', 'g');
    template= template.replace(RE, data[d]);
  }
  console.log(template);
}

loadTemplate("<div>{{name}}, {{anotherString}}</div>", {
  name: "Hunter",
  anotherString: "is amazing!!!!" 
});

Answer 2

使用替换文本的回调进行一个正则表达式替换非常容易：

function loadTemplate(template, data) {
    return template.replace(/\{\{(\w+)\}\}/g, function(match, key) {
        return data[key];
    });
}

alert(loadTemplate("<div>{{name}}, {{anotherString}}</div>", {
    name: "Hunter",
    anotherString: "is amazing!!!!" 
}));

模式是\{\{(\w+)\}\}，意思是{{，后面跟着一个捕获的单词，然后是}}。单词是字母数字字符和下划线的任意序列。

如果您希望能够使用不包含}} 的任何键值（例如，带有空格），您可以将\w+ 替换为.+?：

function loadTemplate(template, data) {
    return template.replace(/\{\{(.+?)\}\}/g, function(match, key) {
        return data[key];
    });
}

alert(loadTemplate("<div>{{The Name}}, {{Another $tring}}</div>", {
    "The Name": "Hunter",
    "Another $tring": "is amazing!!!!" 
}));

Answer 3

我喜欢你的“拆分”想法，我说坚持下去：

window.loadTemplate = function(template, data) {
    var i = 0;
    var bool = true;
    while (bool) {
        try {
        var tags = template.split("{")[i+2].split("}")[0];
        alert(tags);
        i+=2;
        } catch (e)
        {
            bool = false;
        }
    }
}

td {
    border: black solid 1px;
}

<button type="button" onclick="loadTemplate('<div>{{name}}, {{anotherString}}</div>', {name: 'Hunter', anotherString: 'is amazing!!!!' })">Load Template</button>