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

2023年1月4日 130次阅读

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

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

最佳答案 你没有做错任何事. js-beautify肯定有bug和限制.你很可能遇到其中一个.你应该提出一个问题.

也就是说,将所有元素放在单独的行上是否正确比起初看起来要复杂得多. 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>的字体大小怎么样？标签？在某些情况下这可能是安全的,但会改变布局.

点赞