关于 javascript：有人有渲染 HTML 的 diff 算法吗？

我有兴趣看到一个很好的差异算法，可能在 Javascript 中，用于呈现两个 HTML 页面的并排差异。这个想法是差异会显示呈现的 HTML 的差异。

为了澄清，我希望能够看到并排的差异作为渲染输出。所以如果我删除一个段落，并排视图会知道正确地间隔。

@Josh 完全正确。虽然它可能会以红色或其他内容显示已删除的文本。这个想法是，如果我对我的 HTML 内容使用 WYSIWYG 编辑器，我不想切换到 HTML 来做差异。我想和两个所见即所得的编辑器并排一起做。或者至少在最终用户友好的情况下并排显示差异。

---

上周末，我在 codeplex 上发布了一个新项目，该项目在 C# 中实现了 HTML diff 算法。原始算法是用 Ruby 编写的。我知道您正在寻找一种 JavaScript 实现，也许有一个带有源代码的 C# 版本可以帮助您移植该算法。如果您有兴趣，这里是链接：htmldiff.codeplex.com。您可以在此处阅读有关它的更多信息。

更新：此库已移至 GitHub。

---

您可以使用另一个很好的技巧来显着改善呈现的 HTML diff 的外观。虽然这并不能完全解决最初的问题，但它会对呈现的 HTML diff 的外观产生重大影响。

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

解释得更详细一点：

如果你想使用这种技术，运行你的 diff 算法并根据 diff 插入一堆 visibility:hidden spans 或小的 divs 任何你的并排版本应该匹配的地方。然后运行找到每个检查点(及其并排邻居)的 JavaScript，并为页面上较高(较浅)的检查点添加垂直间距。现在，您呈现的 HTML 差异将垂直对齐到该检查点，您可以继续修复并排页面其余部分的垂直对齐。

---

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

---

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

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

HTH

---

DaisyDiff 怎么样(Java 和 PHP 版本可用)。

以下功能非常好：

• 适用于可以"在野外"找到的格式错误的 HTML。
• 差异在 HTML 中比 XML 树的差异更专业。更改部分文本节点不会导致更改整个节点。
• 除了默认的视觉差异之外，HTML 源代码可以连贯地进行差异。
• 提供易于理解的更改说明。
• 默认 GUI 允许通过键盘快捷键和链接轻松浏览修改。

---

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

http://prettydiff.com/

---

所以，你期待

和

被认为是一样的吗？

输出很大程度上取决于用户代理。就像 Ionut Anghelcovici 建议的那样，制作一个图像。为您关心的每个浏览器做一个。

---

如果您使用 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.

---

使用不同的文本会破坏非平凡的文档。
根据您认为直观的内容，XML 不同可能会生成对带有标记的文本不太适用的差异。
AFAIK，DaisyDiff 是唯一专门用于 HTML 的库。它适用于 HTML 的子集。

---

对于较小的差异，您可能可以进行普通的文本比较，然后分析丢失或插入的部分以查看如何解决它，但对于任何较大的差异，您将很难做到这一点.

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

---

如果是 XHTML(我对此做了很多假设)，Xml Diff Patch Toolkit 会有所帮助吗？ http://msdn.microsoft.com/en-us/library/aa302294.aspx

---

我认为这样做的一个好方法是将 HTML 呈现为图像，然后使用一些可以比较图像以发现差异的 diff 工具。

---