JSFiddle - React, Tailwind, and code Playground

by Pankaj Kargirwar

HTML

<script type='code' id='my-template'>
    <div class='{container-class}'>
        <div class='{child1-class}'>
            {child1-content}
        </div>
        
        <div class='{child2-class}'>
            {child2-content}
        </div>
    </div>
</script>

CSS

.my-container {

    background:#444444;
    padding: 10px;
}

.child1 {

    background:#dddddd;
    color:white;
    height:1em;
}

.child2 {

    background:#888888;
    color:white;

}

JavaScript

function processTemplate(templ, data) {                                     
        var re = new RegExp(/{(.*?)}/g);                                    
        templ = templ.replace(re, function(match, p1) {                     
                if (data[p1] || data[p1] == 0 || data[p1] == '') {                            
                        return data[p1];                                    
                } else {                                                    
                        return match;                                       
                }                                                           
        });                                                                 
        return templ;                                                       
}

var templ = $('#my-template').html();

var html = processTemplate(templ, {
    'container-class': 'my-container',
    'child1-class': 'child1',
    'child2-class': 'child2',
    'child1-content': '',
    'child2-content': 'I am child 2',
});

$('body').append(html);