2

Imagine que eu identifique dentro de um texto um elemento span que começa e termina com a classe "cor-verde":

<span data-id="1" class="cor-verde">O texto está assim <strong>parte em negrito</strong></span>

Usando Javascript, teria que transformar esse texto em uma saída dividindo ele através dos espaços das palavras:

 <span data-id="1"><span class="cor-verde">O</span> <span class="cor-verde">texto</span> <span class="cor-verde">está</span> <span class="cor-verde">assim</span> <span class="cor-verde"><strong>parte em negrito</strong></span></span>

A proposta é para que ao exportar um PDF, esse elemento seja reconhecido no layout, que hoje só na HTML essa formatação funciona.

Eu tentei algo assim, mas por algum motivo está quebrando o texto:

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.length) {
                        for(var n in marks[i].childNodes) {
                            var nodeRm = marks[i].childNodes[n];
                           if (nodeRm.nodeName == 'I') {
                               marks[i].removeChild(nodeRm);
                             break;
                          }
                       }
                     }
             if (marks[i].attributes && marks[i].attributes.length) {
                 for(var j in marks[i].attributes) {


                     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(' ');

                     }
                 }
             }
         }
     }
     return content;
 }

var content = document.getElementById('content');
   content = formatContentToPrint(content);

doc.innerHTML = content.innerHTML;
}

No exemplo do Fiddle funciona normal, eu simulei uma situação que ele quebra o código - clique aqui

Quando uso esse método num texto do meu sistema, ele está quebrando, veja nas imagens:

inserir a descrição da imagem aqui

inserir a descrição da imagem aqui

1 Resposta 1

2

Uma forma de fazer isso é quebrando o texto dos spans pelo espaço em seguida usar expressão regular (no caso de houver tags <>) e fazer substituições acrescentando cada palavra dentro de um span:

document.querySelectorAll("span").forEach(function(e){
   var classe = e.className; // pega a class do span principal
   var novo_html = '';
   Array.from(e.childNodes).filter(function(e){
      return e.textContent.replace(/\s{2,}/, '');
   }).forEach(function(e){
      if(e.nodeType == 3){
         e.textContent.trim().split(' ').filter(function(e){
            return e;
         }).forEach(function(e){
            novo_html += '<span class="'+ classe +'">'+ e + '</span> ';
         });
      }else{
         novo_html += '<span class="'+ classe +'">'+ e.outerHTML + '</span> ';
      }
   });
   e.removeAttribute("class"); // remove a classe da span principal
   e.innerHTML = novo_html.trim(); // substitui o HTML
});
.cor-verde{
   color: green;
}

.cor-vermelho{
   color: red;
}
<span data-id="1" class="cor-verde">O texto está assim <strong>parte em negrito</strong></span>
<br>
<span data-id="2" class="cor-vermelho">"texto" qualquer <strong>parte em negrito</strong> <em>parte em itálico</em></span>

Se executar o código acima e olhar no inspetor de elementos do navegador, verá que cada palavra está dentro de um span.

10

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .