//利用stringReplace方法可以方便拼接html
var stringReplace = (function(){
    function isArray(arr) {
        return Object.prototype.toString.call(arr) === '[object Array]';
    }
    return function(str){
        var args = [];
        for(var i = 1; i < arguments.length; i ++){
          args.push(arguments[i]);
        }
        var r, provider;
        if (args.length == 1 && typeof(args[0]) == "object" && !isArray(args[0])) {
            r = /\(([a-z]+)\)|\{([a-z]+)\}|\[([a-z]+)\]/gi;
            provider = args[0];
        } else {
            r = /\(\d+\)|\{\d+\}|\[\d+\]/gi;
            if (isArray(args[0])) {
                provider = args[0];
            } else {
                provider = args;
            }
        }
        str = str.replace(r, function (match) {
            return provider[match.slice(1, match.length - 1)];
        });
        return str;
    }
})();

其实在es6中已经提供了类似方法,但在老版本js中,可以利用该方法

var demo = '<div class="demo_parent {demo_parent_class}">' + 
            '<div class="demo_child1 {demo_child1_class}">' + 
                '<img class="demo_child1_img" src={demo_child1_img_src}>' + 
            '</div>' + 
            '<div class="demo_child2 {demo_child2_class}">' + 
                '<img class="demo_child2_img" src={demo_child2_img_src}>' + 
             '</div>' + 
            '<span class="demo_txt {demo_txt_class}">test</span>' + 
        '</div>'
demo = stringReplace(demo, 
                        {"demo_parent_class":"xxx", 
                        "demo_child1_class":"xxx",
                        "demo_child1_img_src": "xxx",
                        "demo_child2_class": "xxx",
                        "demo_child2_img_src": "xxx",
                        "demo_txt_class": "xxx"});

var d = document.createElement("div");
d.innerHTML= demo;

这里需要注意的是那个正则 r = /(([a-z]+))|{([a-z]+)}|[([a-z]+)]/gi; 其中后缀i是表示该正则的匹配是忽略大小写的,由于js的正则里面没有对单独匹配项目进行?i:的修饰功能, 造成r = /((?i:[a-z]++))|{(?i:[a-z]++)}|[(?i:[a-z]++)]/g; 是不支持的,所以需要填写全局的i参数。