0

Imagina que tenha um elemento pai com filhos onde a classe representa uma seleção de texto:

<span class="item-1" data-id="1">texto selecionado 1
     <span class="item-2" data-id="2">texto selecionado 2
         <span class="item-3" data-id="3">parte do texto 3</span>
     </span>parte do texto 1
</span>

Como poderia fazer estes elementos ficarem desta forma, com alguma método em JavaScript:

<span class="item-1" data-selection="1" data-id="1">texto selecionado 1</span>
<span class="item-2" data-selection="2" data-id="2">texto selecionado 2</span>
<span class="item-3" data-selection="3" data-id="3">parte do texto 3</span>
<span class="item-1" data-selection="4" data-id="1">parte do texto 1</span>

1 Resposta 1

1

Pode usar uma função recursiva que irá percorrer os nós do elemento principal (span de classe .item-1) usando o método .childNodes, que seleciona todos os nós do elemento, seja texto ou tags. Caso encontre uma tag no meio do caminho, irá percorrer os nós dessa tag também, criando uma array onde será montado o novo HTML organizado da forma desejada a ser inserido em um container. Por isso é necessário criar uma span que servirá de container para substituir o HTML.

O atributo data-selection será incrementado pela variável idx que começa com o valor 1. Os outros atributos são pegos no elemento pai do texto.

Veja:

function organiza(){
   
   var no = document.querySelector('.item-1');
   var html = "", idx = 1;
   
   function recursor(n){

      var a = [];

      if(n.nodeType != 3 && n.childNodes){

         for(var i = 0; i < n.childNodes.length; ++i){
            a = a.concat(recursor(n.childNodes[i]));
         }

      }else if(n.data.trim()){

         html += '<span class="'+ n.parentNode.className +'"'
         +' data-selection="'+ idx +'"'
         +' data-id="'+n.parentNode.dataset.id +'">'
         + n.data.trim()
         +'</span>';
         idx++;

      }

      return a;

   }

   recursor(no);
   document.querySelector(".container").innerHTML = html;
   
}

// inicia a função quando o DOM estiver pronto
document.addEventListener("DOMContentLoaded", organiza );
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<span class="container">
   <span class="item-1" data-id="1">
      texto selecionado 1
      <span class="item-2" data-id="2">
         texto selecionado 2
         <span class="item-3" data-id="3">
            parte do texto 3
         </span>
      </span>
      parte do texto 1
   </span>
</span>

Resultado:

inserir a descrição da imagem aqui

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 .