JSFiddle - React, Tailwind, and code Playground

by Lazaro Contreras

HTML

<span>{Cuenta}</span>
<span>{Nombre} {Apellido} tiene una cuenta llamada</span>
<span>{Cuenta}</span>
<div class="text" tag="Nombre" contenteditable="true">Lázaro</div>
<div class="text" tag="Apellido" contenteditable="true">Contreras</div>
<div class="text" tag="Cuenta" contenteditable="true">Caja</div>

JavaScript

var div = document.querySelectorAll(".text");

var childrens = document.body.children;
var childrensEdit = document.createElement("div");
childrensEdit.innerHTML = document.body.innerHTML;

var tags = {};

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

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

//load();

function load() {
  for (var i in childrens) {
    var children = childrensEdit.children[i];
    if (canSplit(children.innerHTML, " "))
      var words = children.innerHTML.split(" ");
    for (var tag in tags) {
      for (var es in words) {
        words[es] = words[es].replace("{" + tag + "}", tags[tag]);
      }
      if (childrens[i] && children.innerHTML && children.innerHTML.includes("{" + tag + "}")) {
        childrens[i].innerHTML = words.join(" ");
      }
    }
  }
}

function cambio(et) {
  for (var i in childrens) {
    var children = childrensEdit.children[i];
    var words = (canSplit(children.innerHTML, " ")) ? children.innerHTML.split(" ") : children.innerHTML.split();

    for (var tag in tags) {
      for (var es in words) {
        words[es] = words[es].replace("{" + tag + "}", tags[tag]);
      }
      
      if (childrens[i] && children.innerHTML && children.innerHTML.includes("{" + et + "}")) {
        childrens[i].innerHTML = (canSplit(children.innerHTML, " ")) ? words.join(" ") : words;
      }
      
    }
  }
}

function canSplit(str, token) {
  return (str || '').split(token).length > 1;
}