Simple JS Templating

tmpl.js

// Simple JavaScript Templating
// John Resig - http://ejohn.org/ - MIT Licensed
// source http://ejohn.org/blog/javascript-micro-templating/
(function(){
    var cache = {};

    this.tmpl = function tmpl(str, data){
        // Figure out if we're getting a template, or if we need to
        // load the template - and be sure to cache the result.
        var fn = !/\W/.test(str) ?
            cache[str] = cache[str] ||
            tmpl(document.getElementById(str).innerHTML) :

            // Generate a reusable function that will serve as a template
            // generator (and which will be cached).
            new Function("obj",
                "var p=[],print=function(){p.push.apply(p,arguments);};" +

                    // Introduce the data as local variables using with(){}
                "with(obj){p.push('" +

                    // Convert the template into pure JavaScript
                str
                    .replace(/[\r\t\n]/g, " ")
                    .split("<%").join("\t")
                    .replace(/((^|%>)[^\t]*)'/g, "$1\r")
                    .replace(/\t=(.*?)%>/g, "',$1,'")
                    .split("\t").join("');")
                    .split("%>").join("p.push('")
                    .split("\r").join("\\'")
                + "');}return p.join('');");

        // Provide some basic currying to the user
        return data ? fn( data ) : fn;
    };
})();

usage.html

<script>
$(document).ready(function(){
   var data = {comment: existing_html, comment_id:comment_id};
   var comment_box = tmpl("edit_comment_js", data);
   console.log(comment_box);
   
});
</script>




<script type="text/html" id="edit_comment_js">
    <div class="comment_redactor_box edit_comment">
        <form method="post" action="#" id="edit_comment_form">
            <% if(comment_id){ %>
               <input id="form_comment_id" name="comment_id" type="hidden" value="<%=comment_id%>" />
            <% } else { %>
               <input id="form_comment_id" name="comment_id" type="hidden" value="0" />
            <% } %>
            <div class="form-group">
                <textarea name="description" cols="40" rows="10" class="form-control" style="height:150px;" id="comment_redactor">
                    <%=comment%>
                </textarea>
            </div>
            <div class="form-group">
                <input type="submit" name="submit" value="Update Comment" class="btn btn-success update_comment" />
            </div>
        </form>

    </div>

</script>