JSFiddle - React, Tailwind, and code Playground

by Roman Zharikov

HTML

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus autem consequatur, consequuntur ex excepturi facilis itaque odit porro quidem quo soluta tempora ut veniam. Ex minus molestiae obcaecati optio quis.
<div>Test div</div>
<div>
  <div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Corporis debitis dignissimos eaque, itaque nihil numquam perferendis provident quis rem repellat similique ullam vitae. Amet aperiam consequuntur dolorem? Aliquid, cum, quas.
  </div>
  <p>Test p</p>
</div>
<div>—</div>

<hr>

<div id="result"></div>

JavaScript

window.prettify = function(d) {
    var treeWalker = document.createTreeWalker(
        /*
         * https://developer.mozilla.org/en-US/docs/Web/API/Document/createTreeWalker
         * */
        d, //  Root element  (example: DOCUMENT)
        4 //  Shows Text nodes
      ),
      elementsArray = [],
      valuesArray = [];
    while (treeWalker.nextNode()) {
      var parentEl = treeWalker.currentNode.parentNode,
        valueElement = treeWalker.currentNode.nodeValue.trim();
      if (parentEl.tagName === 'DIV' && valueElement !== "") {
        elementsArray.push(parentEl);
        valuesArray.push(valueElement);
      }
    }
    for (var i = 0; i < elementsArray.length; i++) {
      elementsArray[i].innerHTML = '<p>' + valuesArray[i] + '</p>';
    }
  };
  const elements = prettify(document);
  document.getElementById('result').innerHTML = document.body.innerHTML;