我有兴趣看到一种很好的diff算法(可能用Java语言编写)来呈现两个HTML页面的并排diff。想法是，差异将显示呈现的HTML的差异。

为了澄清，我希望能够将并排差异作为渲染输出。因此，如果我删除一个段落，并排视图将知道正确地隔开空间。

完全是@Josh。尽管也许它将以红色或者其他形式显示已删除的文本。这个想法是，如果我对HTML内容使用WYSIWYG编辑器，则不需要切换到HTML进行比较。我可能想与两个所见即所得的编辑并排执行。或者至少在最终用户友好的问题上并排显示差异。

解决方案

回答

我相信，执行此操作的一种好方法是将HTML呈现为图像，然后使用一些diff工具来比较图像以发现差异。

回答

所以，你期望

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

和

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

被认为是一样的？

输出在很大程度上取决于用户代理。像爱奥努特·安赫尔科维奇(Ionut Anghelcovici)所建议的那样，制作图像。对我们关心的每个浏览器执行一次操作。

回答

我们还可以使用另一个不错的技巧来显着改善呈现的HTML差异的外观。尽管这不能完全解决最初的问题，但将在呈现的HTML差异的外观上产生重大差异。

并排呈现的HTML将使差异很难垂直对齐。垂直对齐对于比较并排差异至关重要。为了改善并排diff的垂直对齐方式，我们可以在diff的每个版本中的"检查点"处将diff垂直对齐，以插入不可见的HTML元素。然后，我们可以使用一些客户端JavaScript在检查点周围添加垂直间距，直到侧面垂直对齐为止。

详细解释：

如果我们想使用此技术，请运行diff算法并在并排版本应该匹配的位置插入一堆visibility：hidden``<span>s或者微小的<div>`s。差异然后运行JavaScript，以找到每个检查点(及其并排的相邻点)，并向页面上较高(较浅)的检查点添加垂直间距。现在，我们呈现的HTML差异将一直垂直对齐到该检查点，并且我们可以继续在并排页面的其余部分向下修复垂直对齐。

回答

如果是XHTML(我认为这很重要)，那么Xml Diff Patch Toolkit会吗？ http://msdn.microsoft.com/en-us/library/aa302294.aspx

回答

对于较小的差异，我们可能可以进行常规的文本差异分析，然后分析缺失或者插入的部分以查看如何解决该问题，但是对于较大的差异，我们将很难做到这一点。

例如，我们如何检测并显示左对齐的图像(在文本段落的左侧浮动)突然变为右对齐？

回答

不久前，我最终需要类似的东西。要使HTML并排排列，可以使用两个iFrame，但是在滚动时(如果允许滚动)，则必须通过javascript将它们的滚动绑在一起。

但是，要查看差异，我们很有可能想要使用其他人的库。我将Java库DaisyDiff用于一个类似的项目，在该项目中，我的客户很高兴看到带有MS Word"跟踪更改"之类的标记的内容的单个HTML呈现。

高温超导

回答

使用不同的文本会在非平凡的文档上中断。
根据我们认为直观的内容，XML的不同可能会产生差异，这些差异对于带有标记的文本不是很好。
AFAIK，DaisyDiff是唯一专用于HTML的库。它非常适合HTML的子集。

回答

如果我们使用的是Java和XHTML，则XMLUnit允许我们通过org.custommonkey.xmlunit.DetailedDiff类比较两个XML文档：

Compares and describes all the
  differences between two XML documents.
  The document comparison does not stop
  once the first unrecoverable
  difference is found, unlike the Diff
  class.

回答

考虑使用链接或者Lynx的输出来呈现html的纯文本版本，然后进行比较。

回答

对HTML使用Pretty Diff的标记模式。它完全用JavaScript编写。

http://prettydiff.com/

回答

DaisyDiff怎么样(提供Java和PHP版本)。

以下功能非常好：

• 与格式不正确的HTML配合使用，这些HTML可以在"野外"找到。
• 与XML树相比，差异在HTML方面更加专业。更改文本节点的一部分不会导致整个节点被更改。
• 除了默认的视觉差异外，还可以连贯地对HTML源进行差异化。
• 提供易于理解的更改描述。
• 默认的GUI允许通过键盘快捷键和链接轻松浏览修改。

回答

上周末，我在Codeplex上发布了一个新项目，该项目在C＃中实现了HTML diff算法。原始算法是用Ruby编写的。我了解我们正在寻找JavaScript实现，也许在Cwith源代码中提供一个可以移植算法。如果我们有兴趣，请访问以下链接：htmldiff.codeplex.com。你可以在这里读更多关于它的内容。

更新：该库已移至GitHub。