1

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

1 respuesta 1

2

Para que funcione en atributos, te sugiero una opción más viable, minimizando el uso de expresiones regulares y simplificando la lógica:

  1. Trabajar sobre una cadena para no sobrecargar al navegador renderizando en cada remplazo
  2. Obtener primero todos los códigos a remplazar
  3. Recorrer para obtener la variable y aplicar el remplazo

var hola = "hola mundo";

const h = document.querySelector("html");
// Trabajar directamente sobre una cadena para que el navegador no renderice en cada iteración
let html = h.innerHTML;
// Obtener todos los códigos a remplazar
const matches = html.match(/{{(\w|\s)*}}/g);
// Recorrer para aplicar remplazos
matches.forEach(match => {
    // Obtener variable eliminando llaves en los extremos y posibles espacios
    let variable = match.substring(2, match.length - 2).trim();
    // Remplazar
    html = html.replaceAll(match, `<varstamp>${window[variable]}</varstamp>`);
});
// Ahora sí, actualizar HTML
h.innerHTML = html;

// Comprobar que funciona en atributos:
let p = document.querySelector('#funciona');
console.log(p);
{{ hola }}
<p>{{hola}}</p>
<p>{{notDefined}}</p>
<p class="{{ hola }}" id="funciona">{{ noDefinida }}</p>

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.