2

hola e estado viendo algunos tutoriales de javascript y me gustaria saber como puedo remplazar un texto en <div>{{varible}}</div> por el valor que contenga esa variable pero sin usar frameworks.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <div id="texto">{{nombre}}</div>
    <div id="texto">{{apellido}}</div>
    <div id="texto">{{numero}}</div>
</body>
</html>

y el resultado fuera:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <div id="texto">jhon</div>
    <div id="texto">smith</div>
    <div id="texto">123456</div>
</body>
2
  • 1
    esa sintaxis parece fuertemente de algunos frameworks, usas alguno o solo JavaScript?
    – user128299
    el 28 may. 2019 a las 16:41
  • Puedes echarle un vistazo a Handlebars el 28 may. 2019 a las 17:17

1 respuesta 1

3

puedes hacerlo asi:

let nombre = "jhon";
let apellido = "smith";
let numero = "123456";
// funcion de remplazo      
function test() {
   // seleccionamos todos los elementos del documento
   // y lo asignamos a la varible el
   for (let el of document.body.getElementsByTagName('*')){ 
                // omitimos los tagName script
                if (el.tagName === "SCRIPT") continue;
                try {
                    // obtenemos el texto del elemento
                    // remplazamos lo que este dentro de {{}}
                    // evaluamos la expresion con `eval` para obtener el valor
                    // de dicha variable "si existe!"
                    // remplazamos el texto por el resultado obtenido.
                    el.innerText = eval(el.innerText.replace(/\{\{(.+)?\}\}/, '$1'));
                } catch (e) {
                    if (e instanceof SyntaxError)
                        console(e.message);
                    else
                    // si no existe la varibale la marcamos undefined
                        el.innerText = 'undefined';
                }
            }
        }
// llamamos a la funcion  
test();
<div id="texto">{{nombre}}</div>
<div id="texto">{{apellido}}</div>
<div id="texto">{{numero}}</div>

nota: utilizamos try{} catch{} para evitar que nos salte un error en caso de que no este definida la variable o no se puede evaluar la expresion

Tu Respuesta

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

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