2017-05-03 396 views
4

我想寫信給test.html文件放在這個網站:如何將文件寫入html與美?

<h2><strong><a href="http://awesome.com">AwesomeCom</a></strong><span>is awesome</span></h2> 

這將是lokk像:

<h2> 
    <strong> 
     <a href="http://awesome.com"> 
      AwesomeCom 
     </a> 
    </strong> 
    <span> 
     is awesome 
    </span> 
</h2> 

因此它看上去美等等...我試圖此代碼:

var html = require("html"); 
var beautify_html = require('js-beautify').html; 
var data = '<h2><strong><a href="http://awesome.com">AwesomeCom</a></strong><span>is awesome</span></h2>'; 
var beautyHtml= beautify_html(data); 
fs.writeFile('test.html',beautyHtml, function (err) {}); 

但它是停留在一行......是不是我寫錯了?或者我必須添加一些東西?感謝您的幫助

回答

0

這個問題似乎是獨立於js-beautify

有GitHub的頁面上幾個相關的未決問題:

你也可以看到這個不是工作,如果你貼您的任意HTML到 http://jsbeautifier.org/


如果我更換JS-美化爲pretty-data我得到所需的輸出,如XML格式化時:

var fs = require('fs'); 
var pd = require('pretty-data').pd; 
var data = '<h2><strong><a href="http://awesome.com">AwesomeCom</a></strong><span>is awesome</span></h2>'; 
var pdHtml= pd.xml(data); 

fs.writeFile('test.html',pdHtml, function (err){}); 

結果

<h2> 
    <strong> 
    <a href="http://awesome.com">AwesomeCom</a> 
    </strong> 
    <span>is awesome</span> 
</h2> 
+0

很抱歉,但HTML不能像XML來處理 - 元素之間的空間在許多情況下取決於上下文具有含義。 – BitwiseMan

0

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