我有兴趣看到一个好的差异算法，可能在 Javascript 中，用于呈现两个 HTML 页面的并排差异。这个想法是差异将显示呈现的HTML 的差异。
为了澄清，我希望能够将并排差异视为渲染输出。因此，如果我删除一个段落，并排视图会知道正确地分隔内容。
确切地说是@Josh。虽然它可能会以红色或其他内容显示已删除的文本。这个想法是，如果我对我的 HTML 内容使用 WYSIWYG 编辑器，我不想切换到 HTML 来做差异。我想和两个所见即所得的编辑器并排一起做。或者至少在最终用户友好的情况下并排显示差异。
您可以使用另一个很好的技巧来显着改善呈现的 HTML 差异的外观。虽然这并不能完全解决最初的问题，但它会对呈现的 HTML 差异的外观产生重大影响。
并排呈现的 HTML 将使您的差异很难垂直排列。垂直对齐对于比较并排差异至关重要。为了改善并排差异的垂直对齐，您可以在差异应该垂直对齐的“检查点”的每个版本的差异中插入不可见的 HTML 元素。然后，您可以使用一些客户端 JavaScript 在检查点周围添加垂直间距，直到两侧垂直对齐。
解释得更详细一点：
如果您想使用这种技术，请运行您的 diff 算法并根据 diff 在您的并排版本应该匹配的任何地方插入一堆visibility:hidden <span>s 或 tiny s。<div>然后运行找到每个检查点（及其并排邻居）的 JavaScript，并为页面上较高（较浅）的检查点添加垂直间距。现在，您呈现的 HTML 差异将垂直对齐到该检查点，您可以继续修复并排页面其余部分的垂直对齐。
上周末，我在 codeplex 上发布了一个新项目，该项目在 C# 中实现了 HTML diff 算法。原始算法是用 Ruby 编写的。我知道您正在寻找一种 JavaScript 实现，也许有一个带有源代码的 C# 版本可以帮助您移植该算法。如果您有兴趣，这里是链接：htmldiff.codeplex.com。你可以在这里阅读更多关于它的信息。
更新：此库已移至GitHub。
不久前我最终需要类似的东西。要让 HTML 并排排列，您可以使用两个 iFrame，但是您必须在滚动时通过 javascript 将它们的滚动绑定在一起（如果您允许滚动）。
但是，要查看差异，您很可能想要使用其他人的库。我将 Java 库DaisyDiff用于一个类似的项目，我的客户很高兴看到带有 MS Word“跟踪更改”之类的标记的内容的单个 HTML 呈现。
高温高压
考虑使用链接或 lynx 的输出来呈现 html 的纯文本版本，然后对其进行比较。
所以，你期望
<font face="Arial">Hi Mom</font>
和
<span style="font-family:Arial;">Hi Mom</span>
被认为是一样的？
输出很大程度上取决于用户代理。就像Ionut Anghelcovici 建议的那样，制作一个图像。为您关心的每个浏览器做一个。
使用 Pretty Diff for HTML 的标记模式。它完全用 JavaScript 编写。
如果是 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 工具。