任何人都有用于呈现HTML的差异算法？[关闭]

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

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

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

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

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

详细解释：

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

上周末，我在Codeplex上发布了一个新项目，该项目在C＃中实现了HTML diff算法。原始算法是用Ruby编写的。我了解您正在寻找JavaScript实现，也许在C＃中提供源代码可以帮助您移植算法。如果您有兴趣，请点击以下链接：htmldiff.codeplex.com。您可以在此处了解更多信息。

更新：该库已移至GitHub。

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

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

高温超导

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

DaisyDiff怎么样（提供Java和PHP版本）。

以下功能非常好：

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

所以，你期望

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

和

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

被认为是一样的？

输出在很大程度上取决于用户代理。像Ionut Anghelcovici所建议的那样，制作图像。对您关心的每个浏览器执行一次操作。

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

http://prettydiff.com/

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

对于较小的差异，您可能可以进行常规的文本差异分析，然后分析缺失或插入的部分以查看如何解决该问题，但是对于较大的差异，您将很难进行此操作。

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

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

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

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

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