formatting a messed html code with some rules

Question

need to format a messed html code and the function below is fine but...:

• if a div has the class elwrap I need an extra line break after its closing tag
• if a div is empty - for example elmark I need it in one single line:
  i.e. <div class='elmark'></div>

Any help?

function format(ht){
    var result = '';
    ht.split(/>\s*</).forEach(function(element){
        result += '<' + element + '>\r\n';
    });
    return result.substring(1, result.length-3);
}

$('button').on('click', function(){
  let ht = $('#story').html();
  ht = format(ht);
  console.log(ht);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id='story'>
<div class='elwrap'><div class='elmark'></div>
<div class='el'>lorem</div></div><div class='elwrap'><div class='elmark'></div>
<div class='el'>ipsum</div></div>
</div>
<button>CLICK</button>

Answer 1

Something like this maybe helps?

Basically you give it a dummy data under some conditions, then remove it after "format".

function format(ht) {

  var result = '';
  ht.split(/>\s*</).forEach(function(element) {
  result = result.split("empty").join("");
    result += '<' + element + '>\r\n';
    result = result.replace('br style="display:none"', '').replace("<>", '').replace("  ", '');
  });
  
  return result.substring(1, result.length - 3);
  result = result.split("empty").join("");

  
}

$('button').on('click', function() {
  [...document.querySelectorAll(".elwrap")].forEach(element => element.outerHTML += '<br style="display:none">');


  [...document.querySelectorAll("#story *")].forEach(element => {if (element.innerHTML === "") {element.innerHTML = 'empty';}});

  let ht = $('#story').html();
  ht = format(ht); 
  $('#story').html(ht);
  console.log(ht);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id='story'>
  <div class='elwrap'>
    <div class='elmark'></div>
    <div class='el'>lorem</div>
  </div>
  <div class='elwrap'>
    <div class='elmark'></div>
    <div class='el'>ipsum</div>
  </div>
</div>
<button>CLICK</button>