A CodePen by Larry Williamson. Template fill w/ split() - Uses String.split() to break up a template using a RegEx wrap match. Then iterates odd items, replacing the template variable name with the value if there is a matching definition

index.html

<div>This {!template!} has {!variables!} in it.</div>
<button id='fill'>Fill Template</button>

script.js

var $tpl = {
  wrap: /\{!|!\}/,
  fillElement: function(selector,fill_data){
      var template_body = $(selector).html();
      $(selector).html($tpl.fill(template_body,fill_data));
  },
  fill: function(template_body,fill_data){
            var tpl_split = template_body.split($tpl.wrap);
            var tpl_split_count = tpl_split.length;
            for(var idx=1;idx<tpl_split_count;idx+=2){
              if(fill_data.hasOwnProperty(tpl_split[idx])) {
                tpl_split[idx] = fill_data[tpl_split[idx]];
              }      
            }
            return tpl_split.join('');
        }
};
    
$('#fill').click(function(){
      $tpl.fillElement(
        'div',
           {
            "template": "page",
            "variables": "content"
            }
      );
});

style.scss

@import "compass";
body {
  background:#222222;
  color:#999;
 text-align:center;
 div {
    font-size:20px;
    text-align:center;
    margin:0 auto;
    width:auto;
    padding:100px 0 50px;
  }
}