John Resig's Micro-Templating in 140 bytes (138 actually).
Please see John's original article for template syntax and more examples.
with (data){ ... } implementation is longer, so the v variable must be used to access the supplied data like this: <%= v.foo || 'No foo' %>
| function( | |
| a // template string | |
| ){ | |
| return Function( // compile template as a function | |
| "v,o", // data object is called "v" in templates: <%= v.foo %> | |
| "o=" + // this variable will aggregate the output | |
| JSON.stringify(a) // converting template to JavaScript with JSON | |
| .replace(/<%=(.+?)%>/g, '"+($1)+"') // allow to print data: <%= v.foo || 'No foo' %> | |
| .replace(/<%(.+?)%>/g, '";$1;o+="') // other logic: <% for (;;) { %> loopy <% } %> | |
| + ";return o" // return the evaluated template | |
| ) | |
| } |
| function(a){return Function("v,o","o="+JSON.stringify(a).replace(/<%=(.+?)%>/g,'"+($1)+"').replace(/<%(.+?)%>/g,'";$1;o+="')+";return o")} |
| DO WHAT THE FUCK YOU WANT TO PUBLIC LICENSE | |
| Version 2, December 2004 | |
| Copyright (C) 2015 Fedia <[email protected]> | |
| Everyone is permitted to copy and distribute verbatim or modified | |
| copies of this license document, and changing it is allowed as long | |
| as the name is changed. | |
| DO WHAT THE FUCK YOU WANT TO PUBLIC LICENSE | |
| TERMS AND CONDITIONS FOR COPYING, DISTRIBUTION AND MODIFICATION | |
| 0. You just DO WHAT THE FUCK YOU WANT TO. |
| { | |
| "name": "tmpl", | |
| "description": "John Resig's Micro-Templating in 140 bytes", | |
| "keywords": [ | |
| "template", | |
| "render", | |
| "html", | |
| "140bytes" | |
| ] | |
| } |
| <!DOCTYPE html> | |
| <title>John Resig's Micro-Templating in 140 bytes</title> | |
| <h2>Template</h2> | |
| <textarea id="tpl" rows="9" cols="99"></textarea> | |
| <h2>Result <button onclick="test()">Render</button></h2> | |
| <div id="result"></div> | |
| <script type="text/template" id="example"> | |
| <b><%= v.title %></b> | |
| <ul> | |
| <% for (var i=0; i < v.food.length; i++) { %> | |
| <li>Item #<%= i + 1 %>: <%= v.food[i] %></li> | |
| <% } %> | |
| </ul> | |
| </script> | |
| <script> | |
| var tmpl = function(a){return Function("v,o","o="+JSON.stringify(a).replace(/<%=(.+?)%>/g,'"+($1)+"').replace(/<%(.+?)%>/g,'";$1\no+="')+";return o")}; | |
| var $el = document.querySelector.bind(document); | |
| var $editor = $el('#tpl'), | |
| $result = $el('#result'); | |
| $editor.value = $el('#example').text; | |
| function test() { | |
| var render = tmpl($editor.value); // compile template | |
| $result.innerHTML = render({ | |
| title: 'Grocery', | |
| food: ['apple', 'banana', 'cucumber'] | |
| }); | |
| } | |
| test(); | |
| </script> |
I have used recursive regex many times before - if you can utilize the callback's arguments, go for it.