JSFiddle - React, Tailwind, and code Playground

by Scott Kaye

HTML

<span>{{ testobj.text }} {{ testobj.text2 }}</span>

JavaScript

console.clear();

var testobj = {
    text: "This is some text",
    text2: "This is some more text"
};

var bound = [];

function Expression(expr, node) {
    this.expr = expr;
    this.node = node;
};

function bindChildren(el) {
    if (el.childNodes[0]) {
        var templates = el.childNodes[0].nodeValue.trim().match(/\{\{(.+?)\}\}/g);
        if (templates) {
                            console.log(el.childNodes);

            templates.forEach(function (expr) {
                var node = document.createElement("span");
                el.replaceChild(node, expr);
                node.setAttribute("invalid", "");
                bound.push(new Expression(expr, node));
            });
        }
    }

    if (el.children) {
        Array.prototype.forEach.call(el.children, bindChildren);
    }
}

bindChildren(document.body);

function digest() {
    bound.forEach(function (b) {
        if (b.node.hasAttribute("invalid")) {
            b.node.innerHTML = eval(b.expr);
            b.node.removeAttribute("invalid");
        }
    });
}

setInterval(digest, 1000);