JSFiddle - React, Tailwind, and code Playground

by Lazaro Contreras

HTML

<div class="container">
  <span>Hola mucho gusto {Nombre} {Apellido} tiene una cuenta llamada {Cuenta}</span>
  <span>Hola mucho gusto {Nombre} {Apellido} tiene una cuenta llamada {Cuenta}</span><br>
  <span>Hola mucho gusto {Nombre} {Apellido} tiene una cuenta llamada {Cuenta}</span>
</div>
<div class="text" name="Nombre" contenteditable="true">Lázaro</div>
<div class="text" name="Apellido" contenteditable="true">Contreras</div>
<div class="text" name="Cuenta" contenteditable="true">Caja</div>

JavaScript

var lines = document.querySelector(".container").innerHTML.trim().split(/[\n\r]/g).join(" ").split(" ");
var linesEdit = document.querySelector(".container").innerHTML.trim().split(/[\n\r]/g).join(" ").split(" ");
var div = document.querySelectorAll(".text");

var tags = {};

div.forEach(function(e) {
  e.addEventListener("keyup", nombre);
  tags[e.getAttribute("name")] = e.innerHTML;
});

function nombre(e) {
	var t = e.currentTarget.getAttribute("name");
  tags[t] = e.currentTarget.innerHTML;
  cambio();
}

cambio();
function cambio() {
  lines.forEach(function(e, i) {
    for (var tag in tags) {
      if (e.includes("{" + tag + "}")) {
        linesEdit[i] = lines[i].replace("{" + tag + "}", tags[tag]);
      }
    }
  });
  document.querySelector(".container").innerHTML = linesEdit.join(" ");
}