有人有渲染 HTML 的差异算法吗？ [关闭]答案

【问题标题】：Anyone have a diff algorithm for rendered HTML? [closed]有人有渲染 HTML 的差异算法吗？ [关闭]
【发布时间】：2010-09-07 02:23:10
【问题描述】：

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

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

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

【问题讨论】：

这真的是微软的黑客吗？原来的？ :D
听起来类似于这个问题：stackoverflow.com/questions/1061468/html-compare
旧线程，但我想我会给我的 2 美分。我最近一直在处理它，并且找到了一堆库：web.onassar.com/blog/2012/11/21/htmldiff-software-discoveries
@Haacked，找到满意的解决方案了吗？
@Haacked 找到一个可行的解决方案？我试过prettydiff.com，但看起来它坏了。

标签： javascript html diff

【解决方案1】：

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

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

解释得更详细一点：

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

【讨论】：

【解决方案2】：

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

更新：此库已移至GitHub。

【讨论】：

HTMLDiff 算法已移植到 JavaScript (CoffeeScript) 中，here.
嗨@pate，我相信这些链接已经失效了......
@TiagoCardoso 删除了我过时的评论。
@Rohland 很棒的图书馆！真的拯救了我的一天:)
@Florian Parain：感谢您分享指向github.com/tnwinc/htmldiff.js 的链接，效果很好！提示任何想要 JS 版本的人，只需通过“npm install htmldiff”安装，然后使用“src”目录中的 htmldiff.js。

【解决方案3】：

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

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

HTH

【讨论】：

daisydiff 看起来不错

【解决方案4】：

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

【讨论】：

【解决方案5】：

DaisyDiff 怎么样（Java 和 PHP 版本可用）。

以下功能非常好：

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

【讨论】：

【解决方案6】：

所以，你期待

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

和

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

被认为是相同的？

输出很大程度上取决于用户代理。喜欢Ionut Anghelcovici suggests，制作一张图片。为您关心的每个浏览器做一个。

【讨论】：

【解决方案7】：

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

http://prettydiff.com/

【讨论】：

它是否支持渲染差异？我找不到选项。
投反对票，因为我找不到渲染的差异。

【解决方案8】：

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

【讨论】：

【解决方案9】：

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

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

【讨论】：

【解决方案10】：

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

【讨论】：

【解决方案11】：

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

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

【讨论】：

【解决方案12】：

我认为这样做的一个好方法是render the HTML to an image，然后使用一些diff tool that can compare images 来发现差异。

【讨论】：

这两个图像中的任何错位当然会产生巨大的差异，其中实际差异只是微不足道的，就像一张桌子在两个页面之一中高出一个像素。