Untitled

            
              window.onload = function() {

    var Component = {
        title: 'Awesome template',
        colors: ['read', 'green', 'blue'],
        render: '#my-content'
    }

    var Engine = function(comp) {
        var parse = function(tplHTML) {
            var re = /<%([^%>]+)?%>/g;
            var code = [], cursor = 0;
            while(match = re.exec(tplHTML)) {
                code.push(tplHTML.slice(cursor, match.index));
                code.push({code: match[1]}); // <-- expression
                cursor = match.index + match[0].length;
            }
            code.push(tplHTML.substr(cursor, tplHTML.length - cursor));
            var body = 'var r=[];\n';
            while(line = code.shift()) {
                if(typeof line === 'string') {
                    // escaping quotes
                    line = line.replace(/"/g, '\\"');
                    // removing new lines
                    line = line.replace(/[\r\t\n]/g, '');
                    // removing tabs
                    line = line.replace(/  /g, '');
                    body += 'r.push("' + line+ '");\n'
                } else {
                    if(line.code.match(/(^( )?(if|for|else|switch|case|break|while|{|}))(.*)?/g)) {
                        body += line.code + '\n';
                    } else {
                        body += 'r.push(' + line.code + ');\n';
                    }
                }
            }
            body += 'return r.join("");';
            body = 'with(component) {' + body + '}';
            return new Function('component', body).apply(comp, [comp]);
        }
        var tpl = document.querySelector(comp.render);
        if(tpl) {
            var html = parse(tpl.innerHTML);
            return stringToDom(html);
        }
    }

    var el = Engine(Component);
    document.querySelector('body').appendChild(el);



    function stringToDom(str) {
       var wrapMap = {
            option: [ 1, "<select multiple='multiple'>", "</select>" ],
            legend: [ 1, "<fieldset>", "</fieldset>" ],
            area: [ 1, "<map>", "</map>" ],
            param: [ 1, "<object>", "</object>" ],
            thead: [ 1, "<table>", "</table>" ],
            tr: [ 2, "<table><tbody>", "</tbody></table>" ],
            col: [ 2, "<table><tbody></tbody><colgroup>", "</colgroup></table>" ],
            td: [ 3, "<table><tbody><tr>", "</tr></tbody></table>" ],
            _default: [ 1, "<div>", "</div>"  ]
        };
        wrapMap.optgroup = wrapMap.option;
        wrapMap.tbody = wrapMap.tfoot = wrapMap.colgroup = wrapMap.caption = wrapMap.thead;
        wrapMap.th = wrapMap.td;
        var element = document.createElement('div');
        var match = /<\s*\w.*?>/g.exec(str);
        if(match != null) {
            var tag = match[0].replace(/</g, '').replace(/>/g, '');
            var map = wrapMap[tag] || wrapMap._default, element;
            str = map[1] + str + map[2];
            element.innerHTML = str;
            // Descend through wrappers to the right content
            var j = map[0]+1;
            while(j--) {
                element = element.lastChild;
            }
        } else {
            // if only text is passed
            element.innerHTML = str;
            element = element.lastChild;
        }
        return element;
    }

}