javascript – 替换HTML代码段中的占位符

2019年8月4日 334次阅读

考虑一个
HTML代码段,其中包含一系列占位符(包含在单个花括号中).

<div>
  { user.name }
  { user.username }
  { user.address.line1 }
  { user.address.line2 }
</div>

和一个看起来像这样的JavaScript对象：

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

用等效变量替换占位符的最佳方法是什么？我很欣赏这是一种模板的基本形式,但我不希望第三方依赖车把或类似物.除了占位符本身之外,我也不想向模板添加任何细节.如果有特定需要与另一个库发生冲突,那么将占位符分隔符更改为其他内容将会很好.

这是来自更大文件的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特定代码都可以.

谢谢

最佳答案 休息一天,我该怎么办？代码是这样的.

试图从头开始实施模板处理.它应该完全符合您的需求：

除了jquery之外,没有使用库来将编译的模板添加到DOM中.

随意使用它.欢迎Any1使这段代码更好或更小;)

plunker

$(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>
点赞