JSFiddle - React, Tailwind, and code Playground

by Ivan Ferrer

HTML

<script>
var cancel  = function(id)  {

 var $el = $('[data-id="' + id + '"]');

   if ($el.hasClass('with-paragraph')) {
       var text_arr = [], j = 0;
       $el.children('span.paragraph')
           .each(function(i, val){
               console.log('i', i, 'val', val);
               text_arr[j] = $(val).text();
               j++;

       });

        alert('o que fazer no caso de parágrafo?')
   } else {
       $el.contents().unwrap();
   }

}
</script>

<button onclick="cancel('123')">
Cancelar normal
</button>
<button onclick="cancel('321')">
Cancelar parágrafo
</button>

<p>Gasolina, tomate e remédios foram os vilões do mês</p>

<p>

Já os principais impactos <span data-id="123" class="color hightcolor-3">individuais no mês</span>, segundo o IBGE, vieram das altas da gasolina (2,66%), tomate (28,64%) e dos remédios (2,25%), refletindo este último o reajuste anual, em vigor desde 31 de março, com teto de 4,33%.</p>

<p>

Outros destaques de alta no mês foram passagem aérea (5,32%), ônibus urbano (0,74%) e plano de saúde (0,80%). wqerqwrqwrqwr gfsd sdgsdgs</p>

<p>
      <strong>Gasolina, tomate e remédios foram os vilões do mês</strong></p>
      <p>Já os principais impactos individuais no mês, segundo o IBGE, vieram das altas da&nbsp;gasolina (2,66%), tomate (28,64%) e dos remédios (2,25%), refletindo este último o reajuste anual, em vigor desde 31 de março, co
    </p>

     <span class="color with-paragraph hightcolor-3 ng-scope" data-id="321" id="mark_321" data-color="3" data-user="23455" data-date="2019-07-03 11:51:45" data-timestamp="1562165505000" data-note="" data-text="m teto de 4,33%. Outros destaqu" title="" data-zindex="3" style="z-index: 3" data-selection="2" data-category="">

             <span class="paragraph color hightcolor-3" data-id="321" id="mark_321" data-color="3" data-user="23455" data-date="2019-07-03 11:51:45" data-timestamp="1562165505000" data-note="" data-text="m teto de 4,33%. Outros destaqu" title="" data-zindex="3"...

CSS

.color.hightcolor-3 {
      background-image: linear-gradient(to right, transparent 50%, #b7ca58 50%);
    background-origin: 0;
    background-size: 200% 90%;
    background-repeat: repeat-x;
    background-position: -100% 100%;
    transition: background-position 0.5s;

}
.color {
      cursor: pointer;
    position: relative;
    color: white;
    padding: 4px;
}
.color p {
  display:contents;
  }
p {
  font-family: sans-serif;
  margin: 18px 0;
    text-align: justify;
    width: auto;
    font-size: 15px;
}