2017-05-03 61 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>