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 (childrens[i] && children.innerHTML) {
      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("{" + tag + "}")) {
          childrens[i].innerHTML = (canSplit(children.innerHTML, " ")) ? words.join(" ") : words;
        }
      }
    }
  }
}

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

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