JSFiddle - React, Tailwind, and code Playground

by Shah Danial

HTML

<textarea id="result"></textarea><br/><br/><div class="my-content">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam laoreet facilisis ligula convallis dignissim. Duis eget elit a purus sodales eleifend ac non ex. Etiam bibendum turpis massa, ut pharetra velit efficitur eu. Maecenas pellentesque ex turpis, ac tempus tortor mollis sit amet. Nulla eleifend, ante ac faucibus tristique, mi ligula tempus elit, eget faucibus neque dolor in lacus. Donec eget risus condimentum nisi porta ultricies nec vel tortor. Aenean ullamcorper, orci sed eleifend egestas, risus massa semper lacus, ac vehicula quam odio ac neque. Donec a eros vitae orci accumsan varius. Maecenas facilisis elit non libero sagittis, a varius sem rutrum. Praesent eu posuere nulla. Donec dui tortor, luctus eget nulla a, sodales accumsan nibh. Aenean in aliquet augue.

<!--START TABLE --><div class="table-wrap"><table class="content-table vertical">

<thead>
 <tr>
   <th>HURUF</th>
   <th>NOMBOR</th>
 </tr>
</thead>

<tbody>
 <tr>
   <td>A</td>
   <td>1</td>
 </tr>
 <tr>
   <td>B</td>
   <td>2</td>
 </tr>
 <tr>
   <td>C</td>
   <td>3</td>
 </tr>
</tbody>

</table></div><!-- END TABLE -->

Aliquam eu tincidunt magna, a imperdiet augue. Sed id blandit ante. Nam eu velit id lectus pretium luctus ut id leo. Phasellus cursus sollicitudin erat rutrum ullamcorper. Fusce tempus efficitur felis vel semper. Nullam sit amet augue consectetur, varius erat et, blandit lacus. In venenatis lacinia est ac scelerisque. Sed id augue venenatis lacus vestibulum tincidunt. Praesent ex lacus, convallis non pellentesque ac, tincidunt id ante. Proin vestibulum diam sit amet porta pretium. Nulla ac risus quis diam efficitur euismod. Nulla placerat metus mi, quis pretium diam lobortis vel. Nunc scelerisque ex id rhoncus semper. Suspendisse consequat facilisis quam et mollis.

<!--START TABLE --><div class="table-wrap"><table class="content-table">

<thead>
 <tr>
   <th>NN</th>
   <th>HH</th>
 </tr>
</thead>

<tbody>
...

CSS

textarea { width: 100%; height: 2000px}

JavaScript

$(function(){



  $('.table-wrap').each(function(){
  $('.table-wrap br').remove();
  var tttt = $(this).html();
  $(this).html( tttt.replace(/>\s*\</g, '><') );
  });
  $('.gallery br').remove();






var hehe = $('.my-content').html()
.replace(/\n|\r|\r\n/g, '<br/>') //buang jarak
  .replace(/<br>|<br\s*\>/g, '<br/>') // default to <br/>
  .replace(/(<br\/?>){3,}/gi, '<br/><br/>') // br lebih dari 3 boleh blah
  //.replace(/<br\/><br\/>/g, '\n\n<br/><br/>\nn') // add jarak pada double br
  .replace(/<br\/>/g, '\n\n<br/>\n\n') // add jarak single br
  .replace(/<br\/>\r\n\r\n\r\n\r\n<br\/>|<br\/>\n\n\n\n<br\/>|<br\/>\r\r\r\r<br\/>/g, '<br/>\n<br/>') // remove jarak between 2 br
  .replace(/<!--/g, '\n<!--')
  .replace(/-->/g, '-->\n')
  .replace(/(\r\n|\n|\r){3,}/gi, '\n\n') // line lebih dari 3 boleh blah

  //figure
  .replace(/<figure class="gallery">\s*\<!--start gambar/g, '<figure class="gallery">\n\n<!--start gambar')
  .replace(/of gallery-->\s*\<\/figure>/g, 'of gallery-->\n\n<\/figure>')

  //table
  .replace(/<thead>/g, '\n\n<thead>')
  .replace(/<\/thead>/g, '\n</thead>\n\n')
  .replace(/<tbody>/g, '<tbody>')
  .replace(/<\/tbody>/g, '\n</tbody>\n\n')

  .replace(/<tr>/g, '\n <tr>\n')
  .replace(/<\/tr>/g, ' </tr>')
  .replace(/<th>/g, '   <th>')
  .replace(/<td>/g, '   <td>')
  .replace(/<\/th>/g, '</th>\n')
  .replace(/<\/td>/g, '</td>\n')

;

$('#result').val(hehe)

});