Question

不确定我是否可以在标题中更好地解释，但不好在这里解释得更好。我正在尝试创建一个函数，它将充当一个简单的＆＃34; templater＆＃34;。我用一些标签喂它一串＃34; {{name}}＆＃34;它将用一定的字符串替换它。

这是我到目前为止所拥有的：

调用该函数：

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>

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

3 个答案: