JSFiddle - React, Tailwind, and code Playground
HTML
<input type="button" onclick="cleanupDOM('editable')" value="Cleanup">
<div id="editable" contenteditable="true">
<b><i>Hel</i><i>l</i></b><i><b>o World!</b></i><i>Hel</i><i>lo</i>
</div>
JavaScript
function getTextNodesIn(node) {
var textNodes = [];
if (node.nodeType == 3) {
textNodes.push(node);
} else {
var children = node.childNodes;
for (var i = 0, len = children.length; i < len; ++i) {
textNodes.push.apply(textNodes, getTextNodesIn(children[i]));
}
}
return textNodes;
}
function setSelectionRange(el, start, end) {
if (document.createRange && window.getSelection) {
var range = document.createRange();
range.selectNodeContents(el);
var textNodes = getTextNodesIn(el);
var foundStart = false;
var charCount = 0, endCharCount;
for (var i = 0, textNode; textNode = textNodes[i++]; ) {
endCharCount = charCount + textNode.length;
if (!foundStart && start >= charCount && (start < endCharCount || (start == endCharCount && i < textNodes.length))) {
range.setStart(textNode, start - charCount);
foundStart = true;
}
if (foundStart && end <= endCharCount) {
range.setEnd(textNode, end - charCount);
break;
}
charCount = endCharCount;
}
var sel = window.getSelection();
sel.removeAllRanges();
sel.addRange(range);
} else if (document.selection && document.body.createTextRange) {
var textRange = document.body.createTextRange();
textRange.moveToElementText(el);
textRange.collapse(true);
textRange.moveEnd("character", end);
textRange.moveStart("character", start);
textRange.select();
}
}
function cleanupDOM(id) {
var el = document.getElementById(id);
var start = 1;
var end = start+1;
var len = el.textContent.length;
console.log(len);
while(end<len) {
setSelectionRange(document.getElementById(id), start, end);
var isBold = document.queryCommandState("Bold");
var isItalic =...