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

Replacing multiple occurrences of dynamic strings?

本文关键字：动态 字符串 替换      更新时间：2023-09-26

我不确定我是否可以在标题中解释得更好，但我会在这里解释得更好。我试图创建一个功能，将作为一个简单的"模板"。我输入一个带有特定标签的字符串"{{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.
}

我如何循环通过所有的{{变量}}的出现在我的字符串，所以我可以用相关的数据替换它?

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

这很容易做到，使用一个回调的替换文本的正则表达式替换:

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!!!!" 
}));

对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!!!!" 
});

我喜欢你的"拆分"想法，我说坚持下去:

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>

相关文章：