JSFiddle - React, Tailwind, and code Playground

by Udhay

HTML

<script src="https://code.jquery.com/jquery-1.9.1.js"></script>
<div id="view">

</div>

CSS

ins {background: #FFCC00; color: #FFF}
del {background: #FF0000; color: #FFF}

JavaScript

var obj = "<div><p>some text <b>some text</b><ins id='first'>a</ins><ins id='first'>b</ins></p> some text <p><ins id='last'>a</ins><ins id='last'>b</ins><ins id='last'>c</ins><ins id='first'>d</ins><ins id='first'>e</ins> <b>Bold</b><b>Text</b>some text<del id='last'>d</del><del id='last'>e</del><del id='last'>l</del>some text again <del id='first'>D</del><del id='first'>E</del><del id='first'>L</del></p></div><ol><li>asdd<ins id='first'>a</ins><ins id='first'>b</ins></li></ol><h2>Title<ins id='first'>a</ins><ins id='first'>b</ins></h2><h3>Title<del id='first'>D</del><del id='first'>E</del><del id='first'>L</del></h3>";
var myDiv =  document.createElement('div');
var myElements = ['ins','del']
myDiv.innerHTML = obj;
var $div = $(myDiv);
console.log($div.html());
debugger;
myElements.forEach(function(el){
$div.find(el).parent().contents().each(function(){
    var node = this;
    if (node.nodeType == 3) {
        node.nodeValue = node.nodeValue.replace(/\n/g,"");
        return;
    }
    if (node.nodeType != 1) return;
   
    var currentodeId = $(node).attr('id');
    var nextSiblingNodeId = $(node.nextSibling).attr('id');
    //while (node.nextSibling && node.nextSibling.tagName == node.tagName) {
 		debugger;
		while ((node.tagName == 'INS' || node.tagName == 'DEL') && node.nextSibling && $(node.nextSibling).attr('id') == $(node).attr('id')) {
        node.innerHTML = (node.innerHTML + node.nextSibling.innerHTML).replace(/\n/g,"");
        node.parentNode.removeChild(node.nextSibling);
    }
});
});
var viewcontent = $div.html();
$('#view').html(viewcontent);
console.log($div.html());