Intento insertar variables que sean globales dentro del DOM, es decir
var nombre = "valor";
Y los nombres de variables pueden ir así en el DOM
{{ nombre }}
Al momento de cargar la página {{ nombre }}
debe ser reemplazando con valor
, pues ese el valor de la variable
Al momento lo que he hecho es reemplazar las llaves con una etiqueta HTML e identificar la variable
var hola = "hola mundo";
const h = document.querySelector("html");
h.innerHTML = h.innerHTML.replaceAll("{{", "<varstamp>").replaceAll("}}", "</varstamp>");
document.querySelectorAll("varstamp").forEach(el => {
const req = el.innerHTML.replace(/\ /g, "");
h.innerHTML = h.innerHTML.replace("<varstamp>"+el.innerHTML+"</varstamp>", window[req]);
});
{{ hola }}
<p>{{hola}}</p>
<p>{{notDefined}}</p>
Al momento, funciona bien, pero el problema es que no funciona en atributos, es decir si un elemento tiene un atributo
<a attr="{{ hello }}">Link</a>
Resultaría `
<a attr="<varstamp> nombre </varstamp>">Link</a>
Y como es un elemento no iterable, no va a ser reemplazado
El objetivo es que funcione tanto dentro de elementos como en atributos