Javascript 替换HTML代码段中的占位符

考虑这样一个HTML片段，其中包含一系列占位符（包含在单个大括号中）

用等价变量替换占位符的最佳方法是什么？我很欣赏这是一种基本的模板形式，但我不希望第三方依赖于把手或类似的东西。除了占位符本身，我也不想向模板添加任何细节。如果特别需要将占位符delimeter更改为其他内容，那么这样做可以避免与其他库发生冲突

这是一个更大文件中的JS片段，我们用它来解析占位符。它工作得很好，但我不确定它是否是良好的做法，它肯定不是特别优雅！不用说，我们希望在不使用

eval（）

的情况下执行此操作，因为数据源是第三方

      var template = $(self.options.templateId).html();

      for (var k in user) {
            if (!user.hasOwnProperty(k)) continue;
            if(k == 'address'){
                for (var k in user.address) {
                    if (!user.address.hasOwnProperty(k)) continue;
                    var needle = "{ user.address." + k + " }";
                    template = template.replace(needle, user.address[k]);   
                }
            }else{
                var needle = "{ user." + k + " }";
                template = template.replace(needle, user[k]);   
            }
        }

---

这是jQuery插件的一部分，因此任何特定于jQuery的代码都可以

---

谢谢

如果我必须这样做，我已经使用了AngularJS

对于数据绑定到HTML，您可以使用

未来： AngularJ使用双括号{{}， 如果使用单括号，则可以在AngularJS脚本中对其进行更改

var sampleApp = angular.module('YourApp', [], function($interpolateProvider) {
    $interpolateProvider.startSymbol('{');
    $interpolateProvider.endSymbol('}');
});

---

您应该使用一些Id或类 比如说

<div id="box1">
 <span class="name">{ user.name }</span>
 <span class="username">{ user.username }</span>
 <span class="line1">{ user.address.line1 }</span>
 <span class="line2">{ user.address.line2 }</span>
</div>

或

---

其中一个应该很好

您最好使用流行的模板插件：

---

不要使用自定义代码。

请一天假，我该怎么办？编写类似这样的代码
尝试从头开始实现模板处理。它应该完全符合您的需要：
除了jquery之外，没有使用任何库将编译后的模板添加到DOM中。 请随意使用它。欢迎使用Any1使此代码更好或更小；）

$(document).ready(function () {
  var tmpl = 
  ' <div>'+
  '   { user.name }'+
  '   { user.username }'+
  '   { user.address.line1 }'+
  '   { user.address.line2 }'+
  '</div>';

  var user = {
    name: 'Bob Foo',
    username: 'bobfoo',
    address : {
      line1: '10 Foo Street',
      line2: 'Footown'
    }
  };

  function compileTmpl(templateStr, data) {
    var tmpl = ''+templateStr;
    var tokens = tmpl.match(/\{(.[^{]+)\}/ig);
    for(var i=0; i<tokens.length; i++) {
      var t = tokens[i].replace(/([{}\s]+)/ig, '');
      if(t && t.length > 0) {
        var propChain = t.split('.');
        var val = data;
        for(var p=0; p<propChain.length; p++) {
          if(val && val.hasOwnProperty(propChain[p])) {
            val = val[propChain[p]];
          }
        }
        if(val.length > 0) {
           tmpl = tmpl.replace(new RegExp('{[ ]*'+t+'[ ]*}', 'ig'), val);
        }
      }
    }
    return tmpl;
  }

  var compiledTmpl = compileTmpl(tmpl, {user: user});
  $('body').append(compiledTmpl);

});

$（文档）.ready（函数（）{
var tmpl=
' '+
“{user.name}”+
“{user.username}”+
“{user.address.line1}”+
“{user.address.line2}”+
'';
变量用户={
姓名：“Bob Foo”，
用户名：“bobfoo”，
地址:{
第1行：“富街10号”，
第2行：“脚下”
}
};
函数compileTmpl（templateStr，数据）{
var tmpl=''+templateStr；
var tokens=tmpl.match（/\{（.[^{]+）\}/ig）；
对于（变量i=0；i 0）{
var-propChain=t.split（'.'）；
var val=数据；
对于（var p=0；p0）{
tmpl=tmpl.replace（新的RegExp（'{[]*'+t+'[]*}'，ig'），val）；
}
}
}
返回tmpl；
}
var compiledTmpl=compileTmpl（tmpl，{user:user}）；
$（'body'）.append（compiledTmpl）；
});

输出：

Bob Foo bobfoo 10 Foo Street Footown>

这是jQuery插件的一部分，如前所述，我不想引入第三方依赖性。我的想法是，模板可以针对单个用例进行调整-占位符本身应该是标记中的唯一要求。您可以这样制作占位符：{user.name}然后在所有占位符的$（'.placeholder'）上进行交互。。。在这个函数中，你搜索文本，做一些字符串处理，然后写下你的值。我确实做了研究，但据我所知，这个插件不再处于积极开发阶段，它也显得太过有用了。44个用户的关注不是太多吗？这是一个官方插件，实际上不是因为官僚主义。你可以检查引擎盖下的功能，因为它的模板系统是我见过的最简单的（但功能最强大的）。

<div id="box1">
 <span class="name">{ user.name }</span>
 <span class="username">{ user.username }</span>
 <span class="line1">{ user.address.line1 }</span>
 <span class="line2">{ user.address.line2 }</span>
</div>

$('#box1 .name').html(user.name);

$('#box1 .name').text(user.name);

$(document).ready(function () {
  var tmpl = 
  ' <div>'+
  '   { user.name }'+
  '   { user.username }'+
  '   { user.address.line1 }'+
  '   { user.address.line2 }'+
  '</div>';

  var user = {
    name: 'Bob Foo',
    username: 'bobfoo',
    address : {
      line1: '10 Foo Street',
      line2: 'Footown'
    }
  };

  function compileTmpl(templateStr, data) {
    var tmpl = ''+templateStr;
    var tokens = tmpl.match(/\{(.[^{]+)\}/ig);
    for(var i=0; i<tokens.length; i++) {
      var t = tokens[i].replace(/([{}\s]+)/ig, '');
      if(t && t.length > 0) {
        var propChain = t.split('.');
        var val = data;
        for(var p=0; p<propChain.length; p++) {
          if(val && val.hasOwnProperty(propChain[p])) {
            val = val[propChain[p]];
          }
        }
        if(val.length > 0) {
           tmpl = tmpl.replace(new RegExp('{[ ]*'+t+'[ ]*}', 'ig'), val);
        }
      }
    }
    return tmpl;
  }

  var compiledTmpl = compileTmpl(tmpl, {user: user});
  $('body').append(compiledTmpl);

});

<div>   Bob Foo   bobfoo   10 Foo Street   Footown></div>