# Gemfile
gem 'liquid'
gem 'settingslogic'

# settingslogic config file
app.yml
  template: |
    blabla.... {{name}}... blabla... {{email}}

# controller
template = Liquid::Template.parse(Settings.template)
result = template.render('name' => '...', 'email'  => '...')

可以试试这个：

str='\
<div class="dialog">\
  <div class="title">\
    <img src="close.gif" alt="点击可以关闭" />亲爱的提示条\
  </div>\
  <div class="content">\
    <img src="delete.jpg" alt="" />\
    <span>您真的要GG吗？</span>\
  </div>\
  <div class="bottom">\
    <input id="Button2" type="button" value="确定" class="btn"/>&nbsp;&nbsp;\
    <input id="Button3" type="button" value="取消" class="btn"/>\
  </div>\
</div>'

console.log(str);

Coffeescript

str="""
<div class="dialog">
  <div class="title">
    <img src="close.gif" alt="点击可以关闭" />亲爱的提示条
  </div>
  <div class="content">
    <img src="delete.jpg" alt="" />
    <span>您真的要GG吗？</span>
  </div>
  <div class="bottom">
    <input id="Button2" type="button" value="确定" class="btn"/>&nbsp;&nbsp;
    <input id="Button3" type="button" value="取消" class="btn"/>
  </div>
</div>
"""

想要完全避免这种情况 可以用 react

就因为这点就使用 react 的话，未免有点为了技术去技术了。

str = '<div class="dialog">' +
        '<div class="title">' +
            '<img src="close.gif" alt="点击可以关闭" />亲爱的提示条' +
        '</div>' +
        '<div class="content">' +
            '<img src="delete.jpg" alt="" /><span>您真的要GG吗？</span>' +
        '</div>' +
        '<div class="bottom">' +
            '<input id="Button2" type="button" value="确定" class="btn"/>&nbsp;&nbsp;' +
            '<input id="Button3" type="button" value="取消" class="btn"/>' +
        '</div>' +
    '</div>';

如果不依赖 lib，只能从代码格式化的角度去做优化了。 如果嫌弃 react 太重（10k+ js），可以去看看 前端模板。比如 doT.js

HTML

<div id="dialog-quit" class="dialog">
  <div class="title">
    <img src="close.gif" alt="点击可以关闭" />亲爱的提示条
  </div>
  <div class="content">
    <img src="delete.jpg" alt="" />
    <span>您真的要GG吗？</span>
  </div>
  <div class="bottom">
    <input id="Button2" type="button" value="确定" class="btn"/>&nbsp;&nbsp;
    <input id="Button3" type="button" value="取消" class="btn"/>
  </div>
</div>

JavaScript(jQuery)

$('#dialog-quit')

用 jQuery 的 load 方法试试咯

#3 楼 @luikore 写在 js 中没有重用性，显得代码很乱，增加后期维护的复杂度，还是希望 html 的代码能够和 js 代码分开，而且可以通过 ajax 动态添加数据。

#6 楼 @rei 这种方式不错，但是如果需要动态生成一些数据，是不是还得根据 jquery 选择器一个一个 replace？

前端模板引擎

#8 楼 @bestjane 没必要过度工程。楼主的情况应该是很简单的动态效果，在 coffee 写就行

#9 楼 @bestjane coffee 写就好了。

#11 楼 @luikore 恩，谢谢！

#12 楼 @rei 谢谢！

Handlebars

google js template

#1 楼 @raecoo 大神你复活了？

Vuejs

#6 楼 @rei +1 这么大段的 html 代码放在 js 中维护完全不合理 template = $('#dialog-quit').html() html = template.format({data})

只需配合几行的模板方法：

// add `format` method to `String`, equivalent to printf/string.format
// usage: "{a} {b}".format({a: 'hi', b: 'b'}) => "hi b"
// http://stackoverflow.com/questions/610406/javascript-equivalent-to-printf-string-format/18234317#18234317
if (!String.prototype.format) {
    String.prototype.format = function() {
        var str = this.toString();
        if (!arguments.length)
            return str;
        var arg = typeof arguments[0],
            args = (("string" == args || "number" == args) ? arguments : arguments[0]);
        for (arg in args)
            str = str.replace(RegExp("\\{" + arg + "\\}", "gi"), args[arg]);
        return str;
    };
}

#16 楼 @leopku 这两天突然想起来以前看到某大神提到 rivets 把以前一个小项目的 ujs + tempojs 的代码用 Promise + rivets + watch.js 重构了一下，代码清晰了好多

如果你用过 backbone.js 可能会知道这种方式：

1.把要用 js 加载的 html 放到 html 文件的 script 标签里：

<script id="your-tmpl" type="text/template" charset="utf-8">
<div class="dialog"> .... </div>
</script>

2.javascript 中加载 (jQuery)

var dialogTemplate = $('#your-tmpl').html();

如果有需要传递参数，比如使用 underscore 的 template

1.创建模板

<script id="your-tmpl" type="text/template" charset="utf-8">
<div class="dialog">
<%= name %>
</div>
</script>

2.javascript 中加载 (jQuery)

var dialogTemplate = $('#your-tmpl').html()

3.编译模板

var dialogHtml = _.template(dialogTemplate)({ name: 'lvjain700' });

除非是很大量的需要，否则我会用 2 楼的方法，如果真要找个 template 处理，可以搜寻 javascript template 找个合用的。

#22 楼 @lvjian700 cool !