JSFiddle - React, Tailwind, and code Playground

by Ivan Ferrer

HTML

<div id="original">
<p>
texto original:
</p>
<span data-id="1" data-cor="verde" class="cor-verde">O texto está assim <strong>parte em negrito</strong><i></i><br><br></span>
<span data-id="2" data-cor="azul" class="cor-azul">O texto está assim <strong>parte em negrito</strong><i></i></span>
<span data-id="3" data-cor="vermelho" class="cor-vermelha">O texto está assim <strong>parte em negrito</strong><i></i><br><br></span>
</div>

CSS

#original .cor-verde,
#content .cor-verde {
    
  color:#008000;
}
#original .cor-azul,
#content .cor-azul {
    
  color:blue;
}
#original .cor-vermelha,
#content .cor-vermelha {
    
  color:red;
}

JavaScript

window.onload = function(){ 
 var formatContentToPrint = function (content) {
     var marks = content.querySelectorAll('span');
    //  var iel = document.getElementsByTagName("i");
     
     if (marks.length) {
         for(var i in marks) {
             if(marks[i].childNodes && marks[i].childNodes.length) {
               var nodesReserve = [];
                 for (var n = marks[i].childNodes.length - 1; n >= 0; n--) {
                     var node = marks[i].childNodes[n];
                     if(node.nodeName != '#text' && node.nodeName != 'P'  && node.nodeName != 'STRONG') {
                         nodesReserve.push(node);   
                         marks[i].removeChild(node);
                     }
                 }

             }
             if (typeof marks[i].attributes !== 'undefined' && marks[i].attributes && marks[i].attributes.length) {
                   for(var j in marks[i].attributes) {
                     console.log()
                    
                     if(marks[i].attributes[j].name == 'data-id') {
                         var mark = document.querySelector('[data-id="'+marks[i].attributes[j].value+'"]');
                         var listAttributes = [];
                         for (var m in mark.attributes) {
                             if(typeof mark.attributes[m] == "object") {
                                listAttributes.push(mark.attributes[m].name+'="'+mark.attributes[m].value+'"');
                             }
                         }    

                         mark.removeAttribute('class');
                         var words = mark.innerHTML.split(' ');
                         var spans = [];
                         if (words.length) {
                             for (var k in words) {
                                 spans[k] = '<span '+listAttributes.join(' ')+'>'+words[k]+'</span>';
                             }
                         }
                         mark.innerHTML = spans.join(' ');
      ...