你」不要做任何錯誤。 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