如何写文件到美丽的HTML?

我想写的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) {}); 

但它是停留在一行…是不是我写的是错的? 或者我必须添加一些东西? 感谢您的帮助

这个问题似乎是孤立js-beautify

在github页面上有几个相关的开放问题:

你也可以看到这工作,如果你粘贴到http://jsbeautifier.org/任意的HTML


如果我将js-beautifyreplace为漂亮的数据 ,则在格式化为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> 

你没有做错什么。 js-beautify肯定有缺陷和局限性。 很可能你遇到了其中一个。 你应该提出问题。

也就是说,把所有的元素放在不同的行上是否正确,比起初看起来要复杂一些。 js-beautify比使用一系列正则expression式或将HTML对象作为XML的工具准确得多,但它在格式化之前也不能完全parsingHTML,所以看起来像它们的一些行为应该是微不足道的没有实施,因为该工具没有足够的信息来安全地这样做。

例如,如果input是XML,那么上面显示的所需的格式化输出就可以了。 但是,因为这是HTML,问题中显示的所需输出HTML将显示不同于input。

鉴于这个HTML(示例input):

 <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 

给定input的格式化输出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>可能不是安全的分开。 如果input是以下内容,那么在<strong><a>之间添加空白将会产生不同的显示文本:

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

在原始input的情况下,添加一个换行符<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> 

最后,让我们考虑一个更像是可能的意思的input,在合理的地方使用空格:

 <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>