JSFiddle - React, Tailwind, and code Playground
HTML
<template id="custom-template">
<h1><%tags%></h1>
<h2><%height%></h2>
<h3><%testing%></h3>
<h3><%testing%></h3>
<h3><%testing%></h3>
<h3><%testing%></h3>
<h3><%testing%></h3>
<h2><%height%></h2>
<p><%something%></p>
<p><%more%></p>
<p><%example%></p>
</template>
JavaScript
var TemplateEngine = function(tpl, data) {
var re = /(?:<|<)%(.*?)(?:%>|>)/g, match;
return tpl.replace(re, function($0, $1) {
return data[$1] ? data[$1] : $0;
});
}
var template = $('#custom-template').html();
console.log(TemplateEngine(template, {
tags: "Krasimir",
height: 29,
testing: "whatever",
something: "hi",
more: "even more content",
example: "even more!"
}));