5

我想将这个 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) {});

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

4

3 回答 3

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>and是安全的，因为and<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>标签的字体大小呢？这在某些情况下可能是安全的，但会改变同样多的布局。

于 2017-05-04T01:58:33.683 回答
0

您可以从文件中读取然后写入。它将保留格式，并且比在字符串中编写 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');
        });
    });
于 2018-05-25T04:33:27.907 回答
0

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

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

如果您将任意 HTML 粘贴到 http://jsbeautifier.org/ ，您也可以看到这不起作用

如果我将 js-beautify 替换为漂亮数据，则在格式化为 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>
于 2017-05-03T14:40:35.013 回答