Question

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

但它停留在一条线上......我写的是错的吗？或者我必须添加一些东西？谢谢你的帮助

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>之间没有文字，但是{{1不够聪明，不能确定。即使它是，但这是否是正确的行为是有争议的。这样做会产生以下行为，其中格式根据前导文本和/或空格的存在而大不相同：

js-beautify

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

最后，让我们考虑一个更像是可能意味着的输入，在合理的位置使用空格：

<!-- 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-a：多个有效的“美化”HTML输出

有很多方法可以重新格式化。 <h2>The <strong><a href="http://awesome.com">AwesomeCom</a></strong> <span>is awesome</span>!</h2>标记忽略它与它的内容之间的空格，并在已经有空格的地方添加更多的空格是安全的。根据您的要求，以下所有示例都是合理的：

h2

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

有些人甚至会说下一个例子也没关系，但我不太确定。

<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>和<strong>之间添加了一个空格，之前没有任何空格。布局引擎是否会合并<a>之前和之后的空格？如果有CSS改变所有<strong>标签的字体大小怎么样？在某些情况下，这可能是安全的，但会改变布局。

Answer 2

此问题似乎与js-beautify

隔离

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

如果您将任意HTML粘贴到其中，您还可以看到此不有效 http://jsbeautifier.org/

如果我为pretty-data替换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>

Answer 3

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

    File libDir = new File("path/to/jar");

    ProxyCallerInterface caller = ObjectBuilder.builder()
            .setClassName("net.proxy.lib.test.LibClass")
            .setArtifact(DirArtifact.builder()
                    .withClazz(ObjectBuilderTest.class)
                    .withVersionInfo(newVersionInfo(libDir))
                    .build())
            .build();
    String version = caller.call("getLibVersion").asString();

如何用美容将文件写入html？

3 个答案: