Question

有一个单独的模板文本文件，我想用它在我的页面上生成内容。目前我正在使用

string.replace("original", "target");

替换特殊字符串。我创造了一个简单的小提琴来表明这一点 http://jsfiddle.net/christinalam/0yow5zxt/

我想知道是否有更有效的方法来做到这一点。

由于

=== edit ===
我的意思是，还有其他方式使用string.replace吗？这听起来对我不利。

Answer 1

您可以将模板值存储在对象中，然后遍历键/值对。

<!DOCTYPE html>
<html>
    <head>
        <title>Demo page</title>
        <meta charset="utf-8"/>
    </head>
    <body>
    <div id="main">

    </div>
<script>
function populateTemplate(fileAsString, values){
  for(var key in values){
    if(values.hasOwnProperty(key)){
      fileAsString = fileAsString.replace("_"+key+"_", values[key]);
    }
  }
  return fileAsString;
}

function readTemplateFrom(file){
    return "_arg0_ Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, _arg1_ vel illum dolore eu feugiat nulla facilisis.";
}

/*var arg0="This is arg0.";
var arg1= "Time now is " + new Date().getTime();*/
var fileAsString=readTemplateFrom("templateFile.txt");
var values = {
    "arg0": "This is arg0",
    "arg1": "Time now is " + new Date().getTime()
};
document.getElementById("main").innerHTML = populateTemplate(fileAsString, values);
</script>
    </body>
</html>

Answer 2

我写了一篇关于这项技术的博客文章。 http://coding.grax.com/2014/10/tiny-template-engine-pattern-that-you.html 还有JSFiddle http://jsfiddle.net/rg42apuh/

此技术在开始和结束分隔符之间定位属性名称，并用值替换该属性名称。

代码如下：

function ApplyTemplate(template, properties) {
    var returnValue = "";

    var templateFragments = template.split("{{");

    returnValue += templateFragments[0];

    for (var i = 1; i < templateFragments.length; i++) {
        var fragmentSections = templateFragments[i].split("}}", 2);
        returnValue += properties[fragmentSections[0]];
        returnValue += fragmentSections[1];
    }

    return returnValue;
}

你可以这样称呼它

var template =  "The quick {{Color}} {{Animal}} jumped over the lazy dog";

var values = {
    Animal: "fox",
    Color: "brown"
};

var result = ApplyTemplate(template,values);

Answer 3

为什么不使用替换（/ _ / gi，＆＃39;＆＃39;），你能否让我们更清楚地了解这个

string.replace(/_/gi, '');

如何将信息填充到模板文本文件中？

3 个答案: