利用字符串替换函数拼接html

[lynxerzhang]

//利用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;