JSFiddle - React, Tailwind, and code Playground

by Roberto Apasajja

HTML

<p id="testLayout">nano("&lt;p&gt;Hello {user.first_name} {user.last_name}! Your account&nbsp;is &lt;strong&gt;{user.account.status}&lt;/strong&gt;&lt;/p&gt;", data)</p>


<script type="text/javascript">
    window.onload = function () {
        document.getElementById('testLayout').innerHTML = nano("<p>Hello {user.first_name} {user.last_name}! Your account is <strong>{user.account.status}</strong></p>", data);
    }
</script>

JavaScript

function nano(template, data) {
  return template.replace(/\{([\w\.]*)\}/g, function(str, key) {
    var keys = key.split("."), v = data[keys.shift()];
    for (i = 0, l = keys.length; i < l; _i++) v = v[this];
    return (typeof v !== "undefined" && v !== null) ? v : "";
  });
};


        data = {
            user: {
                login: "tomek",
                first_name: "Thomas",
                last_name: "Mazur",
                account: {
                    status: "active",
                    expires_at: "2009-12-31"
                }
            }
        }