整洁的HTML代码基于JavaScript [英] Tidy html code based on javascript

问题描述

我正在写一个可以整理html代码的javascript函数。 （javascript和css代码整理不需要的时刻）

这是我的代码。并检查 http://jsfiddle.net/2q26K/

  function tidyHtml（html）{
 var html = html.trim（）。replace（/> [^<] +< / gm，function （$ 1）{
 return'>'+ $ 1.substr（1，$ 1.length  -  2）.trim（）+''; 
}）。replace（/> \ s +< / gm，'><'）; 
 var containerElement = document.createElement（'div'）; 
 containerElement.innerHTML = html; 
 var result = containerElement.innerHTML; 
 var findLevel = function（child，parent）{
 var level = 0; 
 while（child！= parent）{
 child = child.parentNode; 
 level ++; 
} 
回报水平; 
 
 Array.prototype.slice.call（containerElement.getElementsByTagName（'*'））。forEach（function（element）{
 var tabs = new Array（findLevel（element，containerElement） -  1）.join（''），
 tabs2 =（element.parentNode.lastChild == element）？（'\ n'+ tabs.substring（0，tabs.length  -  1））：'' ，
 containerElement = document.createElement（'div'）; 
 containerElement.appendChild（element.cloneNode（true））; 
 result = result.replace（containerElement.innerHTML，'\\\
 '+ tabs + containerElement.innerHTML + tabs2）; 
}）; 
返回结果; 
 
 
 
 $ b $ p 
 $ b 
在提供的示例中，它完美地工作。
 
 
 
但是，有时候这样的html代码： http://jsfiddle.net/2q26K / 1 /  
 
 
 
它拒绝改变
  < div id =hlogo> 
< a href =/>堆栈溢出< / a> ABC< / div> 
  
至
 < div id =hlogo> 
< a href =/>堆栈溢出< / a> ABC 
< / div> 
  
无法解决它。它太复杂了。有没有更简单的方法可以做同样的事情？
 
 
 
任何改善我的代码的建议，或者我可以学习的任何示例？
 
解决方案
您可以使用这个 a>我在 11346108  
中找到它
I am writing a javascript function which can tidy up html code. (javascript and css code tidying not necessary in the moment)

Here is my code. And check it on http://jsfiddle.net/2q26K/
function tidyHtml(html) {
    var html = html.trim().replace(/>[^<]+</gm, function ($1) {
        return '>' + $1.substr(1, $1.length - 2).trim() + '<';
    }).replace(/>\s+</gm, '><');
    var containerElement = document.createElement('div');
    containerElement.innerHTML = html;
    var result = containerElement.innerHTML;
    var findLevel = function (child, parent) {
        var level = 0;
        while (child != parent) {
            child = child.parentNode;
            level++;
        }
        return level;
    }
    Array.prototype.slice.call(containerElement.getElementsByTagName('*')).forEach(function (element) {
        var tabs = new Array(findLevel(element, containerElement) - 1).join('   '),
            tabs2 = (element.parentNode.lastChild == element) ? ('\n' + tabs.substring(0, tabs.length - 1)) : '',
            containerElement = document.createElement('div');
        containerElement.appendChild(element.cloneNode(true));
        result = result.replace(containerElement.innerHTML, '\n' + tabs + containerElement.innerHTML + tabs2);
    });
    return result;
}
In the example provided, it works perfectly.

But, sometimes when html code like that: http://jsfiddle.net/2q26K/1/

It refuses to change
<div id="hlogo">
    <a href="/">Stack Overflow</a>ABC</div>
To
<div id="hlogo">
    <a href="/">Stack Overflow</a>ABC
</div>
Cannot solve it. It's too complicated. Is there any easier method that can do the same thing?

Any suggestion to improve my code, or any example that I can learn from?
解决方案
You can use this I've found it in 11346108

                        
这篇关于整洁的HTML代码基于JavaScript的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！