html - 怎么把文件写成html漂亮？

Question

我想将此 html 写入 test.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>

所以它看起来很漂亮等等......我试过这个代码:

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) {});

但它停留在一行中...我写的有错吗？或者我必须添加一些东西？感谢您的帮助

Answer 1

你没有做错任何事。 js-beautify肯定有错误和限制。您很可能遇到其中之一。你应该提出一个问题。

也就是说，将所有元素放在单独的行中是否正确比乍看起来要复杂一些。 js-beautify比使用一系列正则表达式或将 HTML 视为与 XML 相同的工具要准确得多，但它也不会在格式化之前完全解析 HTML，因此一些看似微不足道的行为没有实现，因为该工具没有足够的信息来安全地这样做。

示例 1:HTML 不是 XML

例如，如果输入是 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，抱歉。

示例 2:向 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>

示例 3:接近“真实世界”的输入

最后，让我们考虑一个更像是可能意思的输入，在合理的地方有空格:

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

示例 3-a:多个有效的“美化”HTML 输出

有很多方法可以重新格式化它。 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>

示例 3b:无效的“美化”HTML 输出

有些人甚至会说下一个示例也可以，但我不太确定。

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

它在 <strong> 之间添加了一个空格和 <a>以前没有的地方。布局引擎会不会合并<strong>前后的空格？如果有 CSS 可以更改所有 <strong> 的字体大小怎么办？标签？这在某些情况下可能是安全的，但会在很多情况下更改布局。