任何人有渲染HTML的差异algorithm？
我感兴趣的是看到一个很好的差异algorithm，可能在Javascript中，用于呈现两个HTML页面的并排比较。 这个想法是diff会显示呈现的 HTML的差异。
为了澄清，我希望能够看到并行diffs 作为渲染输出。 所以如果我删除一个段落，并排视图将知道正确的空间。
准确地说， 虽然也许它会显示删除的文字红色或其他东西。 这个想法是，如果我为我的HTML内容使用所见即所得的编辑器，我不想切换到HTML来做差异。 我想和两个WYSIWYG编辑并排做。 或者至less在最终用户友好的问题上显示差异。
还有一个很好的技巧可以用来显着改善呈现的HTML diff的外观。 虽然这并不能完全解决最初的问题，但是它会在渲染HTML差异的外观上产生显着的差异。
并排呈现的HTML将使你的差异很难排列垂直。 垂直alignment对比较并排差异是至关重要的。 为了改善并排差异的垂直alignment，你可以在差异的每个版本中插入不可见的HTML元素，在差异应该垂直alignment的“检查点”。 然后，您可以使用一些客户端JavaScript在检查点周围添加垂直间距，直到垂直排列。
更详细地解释一下：
如果你想使用这种技术，根据差异运行你的差异algorithm，并插入一些visibility:hidden <span> s或小的<div> s，无论你的并排版本应该匹配。 然后运行JavaScript来查找每个检查点（以及它的并排邻居），并将垂直间距添加到页面上较高（较浅）的检查点。 现在，您呈现的HTML差异将垂直alignment到该检查点，并且您可以继续修复垂直alignment并排页面的其余部分。
在这个周末里，我发布了一个在C＃中实现HTML差异algorithm的codeplex上的新项目。 原来的algorithm是用Ruby编写的。 我知道你正在寻找一个JavaScript实现，也许有一个在C＃中可用的源代码可以帮助你移植algorithm。 这里是链接，如果你有兴趣： htmldiff.codeplex.com 。 你可以在这里阅读更多。
更新：这个库已经被移动到GitHub 。
考虑使用链接或lynx的输出来呈现html的文本版本，然后比较。
我最后需要类似的东西回来。 为了使HTML排列起来，你可以使用两个iFrames，但是当你滚动的时候（如果你允许滚动的话），你必须通过javascript将他们的滚动连接起来。
然而，要看差异，你很可能会想要使用别人的图书馆。 我使用了一个Java库DaisyDiff来进行一个类似的项目，我的客户很高兴看到一个单独的HTML格式的内容跟随MS Word的“跟踪变化” – 比如标记。
HTH
使用Pretty Diff的标记模式来表示HTML。 它完全用JavaScript编写。
怎么样DaisyDiff （ Java和PHP vesions可用）。
以下function非常好：
- 与可以在“野外”find的格式不正确的HTML一起工作。
- HTML中的差异比XML树更为专业化。 更改文本节点的一部分不会导致整个节点被更改。
- 除了默认的可视化差异之外，HTML源代码可以连贯地进行区分。
- 提供易于理解的变化的描述。
- 默认的GUI允许通过键盘快捷键和链接轻松浏览修改。
所以，你期望
<font face="Arial">Hi Mom</font>
和
<span style="font-family:Arial;">Hi Mom</span>
被认为是一样的？
输出很大程度上取决于用户代理。 像Ionut Anghelcovicibuild议的那样 ，做一个形象。 为每一个你关心的浏览器做一个。
对于较小的差异，你可能会做一个正常的文本差异，然后分析丢失或插入的部分，看看如何解决它，但对于任何更大的差异，你将有一个非常艰难的时间这样做。
例如，如何检测并显示一个左alignment的图像（一段文本的左侧浮动）突然变为右alignment？
如果是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渲染为图像 ，然后使用一些比较图像的差异工具来发现差异。
