JSFiddle - React, Tailwind, and code Playground

HTML

<p>template</p>
<textarea rows="10" cols="50">
Ciao, mi chiamo <span data-placeholder="name"></span>, ho <span data-placeholder="anni"></span> e sono <span data-placeholder="professione"></span></textarea>

<div data-entry data-name="Sandro" data-anni="30" data-professione="Frontend Developer"></div>
<div data-entry data-name="Paolo" data-anni="40" data-professione="Astronauta"></div>

JavaScript

var txtArea = document.querySelector('textarea');

var Entry = function(element) {
    this.element = element;
    
    document.addEventListener('update', this.update.bind(this), false);    
};

Entry.prototype.update = function(){
    this.element.innerHTML = 'ciao';
    var hiddenDoc = document.createDocumentFragment();
    var div = document.createElement('div');
    hiddenDoc.appendChild(div);
    div.innerHTML = txtArea.value;
    
    var a = hiddenDoc.querySelectorAll('span[data-placeholder]');
    var i;
    for(i=0; i<a.length; i++) {
        console.log(a[i].getAttribute('data-name'));
    }
    
    this.element.appendChild(hiddenDoc.firstChild);
};

var entries = document.querySelectorAll('*[data-entry]');
var entry, k;
for(k=0; k<entries.length; k++) {
   entry = new Entry(entries[k]);
   entry.update(); 
}


txtArea.addEventListener('input', function() {
    var evento = document.createEvent('CustomEvent');
    evento.initCustomEvent('update', true, true, {msg: "UPDATE"});
    txtArea.dispatchEvent(evento);    
}, false);

// === test ===

console.log('t1', document.querySelector('div[data-entry]').textContent === 'Ciao, mi chiamo Sandro, ho 30 e sono Frontend Developer');