我有兴趣看到一个很好的差异算法，可能在Javascript中，用于渲染两个HTML页面的并排差异。我们的想法是差异将显示呈现的 HTML的差异。
为了澄清，我希望能够看到并排差异为渲染输出。因此，如果我删除一个段落，并排视图就会知道正确的空格。
答案 0 :(得分：17)
还有一个很好的技巧可以用来显着改善渲染的HTML差异的外观。虽然这并没有完全解决最初的问题，但它会对渲染的HTML差异的外观产生重大影响。
并排渲染的HTML会使你的差异难以垂直排列。垂直对齐对于比较并排差异至关重要。为了改善并排差异的垂直对齐，您可以在差异应该垂直对齐的“检查点”的每个版本的差异中插入不可见的HTML元素。然后，您可以使用一些客户端JavaScript在检查点周围添加垂直间距，直到两边垂直排列。
更详细地解释：
如果你想使用这种技术，运行你的差异算法，并在你的并排版本匹配的任何地方插入一堆visibility:hidden <span>或小<div> s根据差异。然后运行JavaScript，找到每个检查点（及其并排的邻居），并将垂直间距添加到页面上较高（较浅）的检查点。现在，渲染的HTML差异将垂直对齐到该检查点，您可以继续修复并排页面的其余部分的垂直对齐。
答案 1 :(得分：16)
上周末，我在codeplex上发布了一个新项目，该项目在C＃中实现了HTML diff算法。原始算法是用Ruby编写的。我知道您正在寻找一个JavaScript实现，也许在C＃中有一个可用的源代码可以帮助您移植算法。如果您有兴趣，请点击以下链接：htmldiff.codeplex.com。您可以阅读更多相关信息here。
更新：此库已移至GitHub。
答案 2 :(得分：4)
我最后还需要类似的东西。为了让HTML排列在一起，您可以使用两个iFrame，但是当您滚动时，您必须通过javascript将它们的滚动绑定在一起（如果您允许滚动）。
但是，要查看差异，您很可能想要使用其他人的库。我使用了DaisyDiff，一个Java库，用于类似的项目，我的客户很高兴看到内容的单个HTML呈现与MS Word“跟踪更改”一样的标记。
HTH
答案 3 :(得分：4)
考虑使用链接或lynx的输出来呈现html的纯文本版本，然后对其进行差异化。
答案 4 :(得分：2)
以下功能非常好：
答案 5 :(得分：1)
所以，你期待
<font face="Arial">Hi Mom</font>
和
<span style="font-family:Arial;">Hi Mom</span>
被认为是一样的吗？
输出很大程度上取决于用户代理。与Ionut Anghelcovici suggests一样，制作图片。为您关心的每个浏览器做一个。
答案 6 :(得分：1)
使用Pretty Diff for HTML的标记模式。它完全用JavaScript编写。
答案 7 :(得分：0)
如果它是XHTML（我假设很多）Xml Diff Patch Toolkit会有帮助吗？ http://msdn.microsoft.com/en-us/library/aa302294.aspx
答案 8 :(得分：0)
对于较小的差异，你可以做一个普通的文本差异，然后分析丢失或插入的部分，看看如何解决它，但对于任何更大的差异，你将很难做到这一点
例如，您如何检测并显示左对齐图像（文本段落的左侧）突然变为右对齐？
答案 9 :(得分：0)
使用不同的文本会破坏非平凡的文档。 根据您认为的直观，XML的不同可能会生成对带有标记的文本不太好的差异。 AFAIK，DaisyDiff是唯一专门用于HTML的库。它适用于HTML的一个子集。
答案 10 :(得分：0)
如果您使用的是Java和XHTML，XMLUnit允许您通过org.custommonkey.xmlunit.DetailedDiff类比较两个XML文档：
比较和描述所有 两个XML文档之间的差异。 文件比较不会停止 一旦第一次无法恢复 与Diff不同，发现了差异 类。
答案 11 :(得分：-5)
我认为这样做的好方法是render the HTML to an image，然后使用一些diff tool that can compare images来发现差异。