[英]How to tidy up HTML code based on JavaScript
I am writing a JavaScript function which can tidy up HTML code (JavaScript and CSS code tidying is not necessary at the moment).我正在编写一个可以整理 HTML 代码的 JavaScript 函数(目前不需要整理 JavaScript 和 CSS 代码)。
Here is my code.这是我的代码。 And check it on http://jsfiddle.net/2q26K/并在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 is like that: http://jsfiddle.net/2q26K/1/但是,有时 HTML 代码是这样的: 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>
I cannot solve it.我无法解决它。 It's too complicated.这太复杂了。 Is there an easier method that can do the same thing?有没有更简单的方法可以做同样的事情?
How can I improve my code?如何改进我的代码? What would be an example that I can learn from?什么是我可以学习的例子?
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.