您不应该为生产环境中的标记缩进而烦恼。你也不应该使用 Tidy 或其他 HTML 净化器。有一些有效的用例,例如当您允许 HTML 输入时(但考虑使用Markdown代替),尽管这些用例很少见。
大多数情况下,HTML 美化过滤器被滥用来隐藏代码的潜在问题。不。手动更正您的标记。
如果您只需要在开发环境中缩进您的代码,您可以使用上述任何一种。但是,请注意这些库会尝试修复您的标记(这是它们的主要目的;缩进是副产品)。我已经编写了基于正则表达式的缩进工具Dindent。
Dindent 将像这样转换标记:
<!DOCTYPE html>
<html>
<head></head>
<body>
<script>
console.log('te> <st');
function () {
test; <!-- <a> -->
}
</script>
<div>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<div><table border="1" style="background-color: red;"><tr><td>A cell test!</td>
<td colspan="2" rowspan="2"><table border="1" style="background-color: green;"><tr> <td>Cell</td><td colspan="2" rowspan="2"></td></tr><tr>
<td><input><input><input></td></tr><tr><td>Cell</td><td>Cell</td><td>Ce
ll</td></tr></table></td></tr><tr><td>Test <span>Ce ll</span></td></tr><tr><td>Cell</td><td>Cell</td><td>Cell</td></tr></table></div></div>
</body>
</html>
对此:
<!DOCTYPE html>
<html>
<head></head>
<body>
<script>
console.log('te> <st');
function () {
test; <!-- <a> -->
}
</script>
<div>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<div>
<table border="1" style="background-color: red;">
<tr>
<td>A cell test!</td>
<td colspan="2" rowspan="2">
<table border="1" style="background-color: green;">
<tr>
<td>Cell</td>
<td colspan="2" rowspan="2"></td>
</tr>
<tr>
<td>
<input>
<input>
<input>
</td>
</tr>
<tr>
<td>Cell</td>
<td>Cell</td>
<td>Ce ll</td>
</tr>
</table>
</td>
</tr>
<tr>
<td>Test <span>Ce ll</span></td>
</tr>
<tr>
<td>Cell</td>
<td>Cell</td>
<td>Cell</td>
</tr>
</table>
</div>
</div>
</body>
</html>
除了添加缩进之外,Dindent 不会尝试清理或以其他方式干扰您的代码。这是为了使您的开发/调试更容易。不用于生产。