你”不要做任何错误。 js-beautify
肯定有错误和局限性。很可能你遇到了其中一个。你应该提出问题。
也就是说,是否将所有元素放在不同的行上是正确的,比起初看起来要复杂一些。 js-beautify
比使用一系列正则表达式或将HTML对待为XML的工具准确得多,但它在格式化HTML之前也没有完全解析HTML,所以看起来像它们的一些行为应该是微不足道的因为该工具没有足够的信息来安全地执行此操作。
例如,如果输入是XML,那么上面显示的所需的格式化输出将会很好。但是,因为这是HTML,问题中显示的所需输出HTML将显示与输入不同的内容。
鉴于这种HTML(样品输入):
<h2><strong><a href="http://awesome.com">AwesomeCom</a></strong><span>is awesome</span></h2>
显示的文本看起来像这样:
AwesomeComis awesome
鉴于这种HTML(所需的输出):
<h2>
<strong>
<a href="http://awesome.com">AwesomeCom</a>
</strong>
<span>is awesome</span>
</h2>
显示的文字将如下所示:
AwesomeCom is awesome
给定的输入格式输出HTML可能是以下任一:
<h2>
<strong><a href="http://awesome.com">AwesomeCom</a></strong><span>is awesome</span>
</h2>
<h2><strong><a href="http://awesome.com">AwesomeCom</a></strong><span>is awesome</span></h2>
但它绝对不是问题出所需的输出HTML,对不起。
接下来,让我们考虑为什么<strong>
和<a>
可能不安全分开。如果输入了以下内容,然后<strong>
和<a>
之间加空格会产生不同的显示文本:
<h2>The<strong><a href="http://awesome.com">AwesomeCom</a></strong><span>is awesome</span>!</h2>
在原始输入的情况下,添加一个换行符<strong>
和<a>
是安全的,因为之间没有文本<h2>
和<strong>
,但js-beautify
不够聪明,以确保这一点。即使是这样,这是否是正确的行为也值得商榷。这样做会产生其中的格式有所不同似地根据领先的文本和/或空白的存在以下行为:
<!-- Input -->
<h2><strong><a href="http://awesome.com">AwesomeCom</a></strong><span>is awesome</span>!</h2>
<h2>The<strong><a href="http://awesome.com">AwesomeCom</a></strong><span>is awesome</span>!</h2>
<!-- Output -->
<h2>
<strong>
<a href="http://awesome.com">AwesomeCom</a></strong><span>is awesome</span>!
</h2>
<h2>
The<strong><a href="http://awesome.com">AwesomeCom</a></strong><span>is awesome</span>!
</h2>
最后,让我们考虑的输入是更像是大概的意思,用在合理的地方空间:
<h2>The <strong><a href="http://awesome.com">AwesomeCom</a></strong> <span>is awesome</span>!</h2>
有许多的方式来重新格式化,这一切的下面是合理取决于谁你问:
<h2>
The
<strong><a href="http://awesome.com">AwesomeCom</a></strong>
<span>is awesome</span>!
</h2>
<h2>
The
<strong>
<a href="http://awesome.com">AwesomeCom</a>
</strong>
<span>is awesome</span>!
</h2>
<h2>
The <strong><a href="http://awesome.com">AwesomeCom</a></strong>
<span>is awesome</span>!
</h2>
<h2>The <strong><a href="http://awesome.com">AwesomeCom</a></strong> <span>is awesome</span>!</h2>
很抱歉,但HTML不能像XML来处理 - 元素之间的空间在许多情况下取决于上下文具有含义。 – BitwiseMan