JSFiddle - React, Tailwind, and code Playground

by João Vitor Scheuermann

HTML

<hr>
<pre id="out1"></pre>
<hr>
<pre id="out2"></pre>
<hr>
<pre id="out3"></pre>
<hr>

JavaScript

var str1 = '<div>  <div>  <div>  lalala </div> </div> </div>';
var str2 = '<div id="a"\n         class="b">\n    Hello\n    </div>';

$('#out1').text(process(str1));
$('#out2').text(process(str2));

function process(str) {
    
    var div = document.createElement('div');
    div.innerHTML = str.trim();
    
    return format(div, 0).innerHTML;
}

function format(node, level) {
    
    var indentBefore = new Array(level++ + 1).join('  '),
        indentAfter  = new Array(level - 1).join('  '),
        textNode;
    
    for (var i = 0; i < node.children.length; i++) {
        
        textNode = document.createTextNode('\n' + indentBefore);
        node.insertBefore(textNode, node.children[i]);
        
        format(node.children[i], level);
        
        if (node.lastElementChild == node.children[i]) {
            textNode = document.createTextNode('\n' + indentAfter);
            node.appendChild(textNode);
        }
    }
    
    return node;
}