使用一些规则格式化一个混乱的 html 代码

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:
  ie <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>