Creating simple view engine using JavaScript

Question

How can I create simple view engine using JavaScript like Mustache, so that the word between the {{ }} is replaced by its value, like:

<p>hey there {{ codeName }}</p>
codeName = 'JavaScript 6'

so that it be converted to:

<p>hey there JavaScript 6</p>

You literally just asked that question here: http://stackoverflow.com/questions/34006047/ — Adam Konieska, Nov 30 '15 at 19:41
@AdamKonieska I forced to re-ask it, because some people put the other one on hold, without offering solution. — Hasan A Yousef, Nov 30 '15 at 19:47

Hasan A Yousef · Accepted Answer · 2015-11-30T20:04:26.750

I found the below to be proper way:

var templater = function(html){
  return function(data){
  for(var x in data){
    var re = "{{\\s?" + x + "\\s?}}";
    html = html.replace(new RegExp(re, "ig"), data[x]);
  }
  return html;
 };
};

var template = new templater("<p>hey there {{ codeName }}</p>");
var div = document.createElement("div");
div.innerHTML = template({
  codeName: "JavaScript 6"
 });
 document.body.appendChild(div);

reference is here

Creating simple view engine using JavaScript

1 Answers1