如何用美将文件写入html？答案

【问题标题】：How to write file to html with beauty?如何用美将文件写入html？
【发布时间】：2017-05-03 13:53:37
【问题描述】：

我想将这个 html 写入 test.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) {});

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

【问题讨论】：

标签： html node.js js-beautify

【解决方案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 添加空格可能会改变布局

接下来，让我们考虑一下为什么  和 <a> 可能无法安全分开。如果输入如下，那么在 和<a> 之间添加空格会产生不同的显示文本：

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

在原始输入的情况下，添加换行符 和<a> 是安全的，因为<h2> 和 之间没有文本，但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>

它在 和<a> 之间添加了一个空格，这是以前没有的。布局引擎会合并前后的空间吗？如果有 CSS 可以改变所有  标签的字体大小呢？这在某些情况下可能是安全的，但会改变同样多的布局。

【讨论】：

【解决方案2】：

这个问题好像被js-beautify隔离了

github 页面上有几个相关的未解决问题：

如果您将任意 HTML 粘贴到 http://jsbeautifier.org/

如果我将 js-beautify 替换为 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>

【讨论】：

抱歉，HTML 不能像 XML 一样对待 - 元素之间的空格在很多情况下都有意义，具体取决于上下文。

【解决方案3】：

您可以从文件中读取然后写入。它将保留格式，并且比在字符串中编写 HTML 更好（除非你必须这样做）：

    fs.readFile(fs.realpathSync('input.html'), 'utf8', function (err, data){
        if (err) {
            return console.log(err);
        }
        fs.writeFile('output.html', data, function (err) {
            if (err) return console.log(err);
            console.log('File writing done');
        });
    });

【讨论】：