logo标签列表

有人有用于渲染HTML的差异算法吗？

javascripthtmldiff
91

我希望能够看到一个好的差异算法，最好是用Javascript编写，以便呈现两个HTML页面的并排差异。该想法是差异将显示已呈现的HTML的不同之处。

为了澄清，我想要能够看到并排比较的差异结果，就像已经呈现的输出一样。因此，如果我删除了一个段落，差异比较结果会知道如何正确地排版。

@Josh 没错。不过，也许它会以红色或其他颜色显示删除的文本。这个想法是，如果我使用所见即所得（WYSIWYG）编辑器编辑我的HTML内容，我不希望必须切换到HTML才能进行差异比较。我希望能够在两个WYSIWYG编辑器之间进行并排比较，或者至少以用户友好的方式并排显示差异比较结果。

1
这真的是微软的 Haacked 吗？原版的？ :D - Ahmed Khalaf
1
类似于这个问题：https://dev59.com/o0jSa4cB1Zd3GeqPDTfl - rjmunro
2
旧帖子，但我想发表我的意见。最近我一直在处理它，并找到了一堆库：http://web.onassar.com/blog/2012/11/21/htmldiff-software-discoveries/ - onassar
2
@Haacked，你找到令人满意的解决方案了吗？ - DG.
@Haacked 找到可行的解决方案了吗？我尝试了 prettydiff.com 但似乎它已经失效了。 - coding_idiot
12个回答
18

我在CodePlex上发布了一个新项目，用C#实现了HTML差异算法。原始算法是用Ruby编写的。我知道您正在寻找JavaScript实现，也许有一个带源代码的C#实现可以帮助您将该算法移植到JavaScript。如果您感兴趣，这里是链接：htmldiff.codeplex.com。您可以在这里了解更多信息。

更新：该库已经迁移到GitHub。

4
HTMLDiff算法已被移植到JavaScript（CoffeeScript）中，这里。 - Florian Parain
嗨@pate，我相信这些链接已经失效了... - Tiago Cardoso
@TiagoCardoso 删除了我过时的评论。 - Petrus Theron
@Rohland 很棒的库！ 真的救了我的一天 :) - Sirar Salih
我尝试了js版本，在大多数情况下它运行得相当不错，但是当内容相同时，它似乎无法正确检测HTML标记的差异，例如<bold>abc</bold>变成<em>abc</em>。 - Bill Yang
3
@Florian Parain: 感谢您分享 https://github.com/tnwinc/htmldiff.js 的链接，它很好用！如果有人想使用 JS 版本，可以通过 "npm install htmldiff" 安装，然后在 "src" 目录中使用 htmldiff.js。 - Elijah Lofgren
17

还有一个不错的技巧可以显著改善渲染的HTML差异。虽然这并没有完全解决初始问题，但它会对你呈现的HTML差异的外观产生显著影响。

并排呈现的HTML将使得垂直对齐变得非常困难。而对于比较并排差异来说，垂直对齐至关重要。为了提高并排差异的垂直对齐，您可以在差异的每个版本中插入不可见的HTML元素，这些元素位于差异应该垂直对齐的“检查点”处。然后，您可以使用一些客户端JavaScript在检查点周围添加垂直间距，直到两侧垂直对齐。

稍微详细解释一下：

如果想要使用此技术，请运行您的差异算法，并在您的并排版本应该匹配的任何位置插入大量 visibility:hidden 的 <span> 或微小的 <div>。然后运行JavaScript，找到每个检查点（以及其并排邻居），并向页面上较高位置（更浅）的检查点添加垂直间距。现在，您的呈现的HTML差异将垂直对齐到该检查点，并且可以继续修复其余并排页面的垂直对齐。

4
考虑使用links或lynx的输出来呈现html的纯文本版本，然后进行差异比较。
4
我前段时间也需要类似的东西。要使HTML并排对齐，您可以使用两个iFrame，但是当滚动时（如果允许滚动），则必须通过javascript将它们的滚动绑定在一起。
然而，为了查看差异，您很可能需要使用其他人的库。我使用了一个名为DaisyDiff的Java库，用于类似项目，我的客户很满意看到内容的单个HTML呈现以及类似于MS Word“跟踪更改”的标记。
希望有所帮助。
daisydiff 看起来不错。 - coding_idiot
2
关于DaisyDiff（有Java和PHP版本），您怎么看？
以下功能非常好：
  • 可以处理“野生”格式错误的HTML。
  • 与XML树差异比较相比，HTML差异比较更专业。修改文本节点的一部分不会导致整个节点被更改。
  • 除了默认的可视化差异之外，还可以协同地对比HTML源文件。
  • 提供易于理解的更改描述。
  • 默认GUI允许通过键盘快捷键和链接轻松浏览修改内容。
1

所以，你期望

<font face="Arial">Hi Mom</font>

并且

<span style="font-family:Arial;">Hi Mom</span>

被认为是相同的吗？

输出结果非常依赖于用户代理。就像Ionut Anghelcovici建议的那样，制作一张图片。为您关心的每个浏览器都制作一张。

0
1
它支持渲染差异吗？我找不到选项。 - Joel Peltonen
2
因为我找不到渲染的差异，所以被踩了。 - Tiago Cardoso
0

使用文本差异工具会在非平凡文档上出现问题。 根据您认为什么是直观的，XML差异可能会生成对带有标记的文本不太好的差异。 据我所知，DaisyDiff 是唯一专门用于HTML的库。它在HTML子集方面表现出色。

0
如果您正在使用Java和XHTML，XMLUnit允许您通过org.custommonkey.xmlunit.DetailedDiff类比较两个XML文档：

比较并描述两个XML文档之间的所有差异。与Diff类不同，文档比较不会在发现第一个无法恢复的差异时停止。

0
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接