JSFiddle - React, Tailwind, and code Playground

by luizz

HTML

<pre>
    var template = "<img src='{{src}}' />";
    var data = [
                {src:'http://lorempixel.com/380/620/business'},
                {src:'http://lorempixel.com/380/620/business'}
                ];

    $("#result").html( $.templace(template, data) );
</pre>

<div id='result'></div>

JavaScript

$(function(){
    /**
    * Função obter elementos
    * @param string template
    * @param string data
    */
  jQuery.extend({templace : function(template, data, conf){
        
                conf = (typeof conf === 'function') ? {callback:conf}:conf;

                var _conf = {
                        callback:'',
                        classAlpha:'alpha',
                        classOmega:'omega',
                        nthchild:0,
                        arrayCallback:'',
                        html:''
                    }, match = template.match(new RegExp('{{([A-z0-9\_]+)}}',"gmi")), varTmpl = [];
                    
                //Limpar as {{ }} das var's
                for(var i in match){
                    varTmpl[i] = match[i].toString().replace(/\{\{(.*)\}\}/, "$1");
                }
                
                _conf = $.extend(_conf, conf);

                var data = data || {};

                function _parse(a, b){

                    var _html = a;
                    
                    for(var i in varTmpl){

                        var name = varTmpl[i].toString();

                        if(typeof(b[name]) !== "undefined"){ 

                            if(_conf.arrayCallback.call)_conf.arrayCallback.call(b[name]);

                            _html = _html.replace(new RegExp('{{'+ name +'}}',"gm"), b[name]);
                        }
                    }

                   return _html;
                }

                function _init(){

                    if($.isArray(data) === true){

                        for(var i in data){ 
                            _conf.html += _parse(template, data[i]);
                        }

                           _conf.html = $( _conf.html);

                          if(_conf.nthchild > 0){

                             _conf.html.filter('.item_tpl:nth-child('+_conf.nthchild+'n+0)').addClass(_conf.classOmega)
                                       .end()
              ...