有人有渲染 HTML 的 diff 算法吗？[关闭]
https://stackoverflow.com/questions/31722
-
09-06-2019 - |
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
Russian题
我有兴趣看到一个好的 diff 算法，可能是用 Javascript 编写的，用于渲染两个 HTML 页面的并排差异。这个想法是 diff 将显示差异 呈现 HTML。
为了澄清一下，我希望能够看到并排的差异 作为 渲染输出。因此，如果我删除一个段落，并排视图就会知道如何正确间隔。
@乔希正是如此。尽管它可能会以红色或其他方式显示已删除的文本。这个想法是，如果我对 HTML 内容使用所见即所得编辑器，我不想必须切换到 HTML 来进行差异。也许我想和两个所见即所得的编辑器一起做。或者至少以对最终用户友好的方式并排显示差异。
解决方案
您可以使用另一个不错的技巧来显着改善渲染的 HTML 差异的外观。尽管这并不能完全解决最初的问题，但它会对渲染的 HTML 差异的外观产生重大影响。
并排渲染的 HTML 将使您的差异很难垂直对齐。垂直对齐对于并排比较差异至关重要。为了改进并排差异的垂直对齐，您可以在差异的每个版本中的“检查点”处插入不可见的 HTML 元素，其中差异应垂直对齐。然后，您可以使用一些客户端 JavaScript 在检查点周围添加垂直间距，直到两侧垂直对齐。
更详细地解释一下：
如果您想使用此技术，请运行 diff 算法并插入一堆 visibility:hidden <span>s或很小 <div>根据差异，您的并排版本应该匹配的地方。然后运行 JavaScript，找到每个检查点（及其并排的邻居），并向页面上较高（较浅）的检查点添加垂直间距。现在，您渲染的 HTML 差异将垂直对齐到该检查点，并且您可以继续修复并排页面其余部分的垂直对齐。
其他提示
周末我在 codeplex 上发布了一个新项目，该项目用 C# 实现了 HTML diff 算法。原始算法是用 Ruby 编写的。我知道您正在寻找一种 JavaScript 实现，也许 C# 中的源代码可以帮助您移植算法。如果您有兴趣的话，这是链接： htmldiff.codeplex.com. 。您可以阅读更多相关内容 这里.
更新： 该库已移至 GitHub.
不久前我最终需要类似的东西。为了让 HTML 并排排列，您可以使用两个 iFrame，但是您必须在滚动时通过 javascript 将它们的滚动连接在一起（如果您允许滚动）。
然而，要查看差异，您很可能想使用其他人的库。我用了 雏菊差异, ，一个 Java 库，用于一个类似的项目，我的客户很高兴看到使用 MS Word“跟踪更改”之类的标记对内容进行单个 HTML 渲染。
华泰
考虑使用 links 或 lynx 的输出来渲染 html 的纯文本版本，然后对其进行比较。
所以，你期望
<font face="Arial">Hi Mom</font>
和
<span style="font-family:Arial;">Hi Mom</span>
被认为是相同的？
输出很大程度上取决于用户代理。喜欢 约努特·安格尔科维奇建议, ，制作图像。为您关心的每一个浏览器做一个。
使用 Pretty Diff for HTML 的标记模式。它完全是用 JavaScript 编写的。
如果它是 XHTML（这对我来说有很多假设），Xml Diff Patch Toolkit 会有帮助吗？ http://msdn.microsoft.com/en-us/library/aa302294.aspx
对于较小的差异，您可能可以进行正常的文本比较，然后分析丢失或插入的部分以了解如何解决它，但对于较大的差异，您将很难做到这一点。
例如，您如何检测并显示左对齐图像（浮动在文本段落的左侧）突然变为右对齐？
使用不同的文本会破坏重要的文档。根据您直观的想法，XML 差异可能会生成对于带有标记的文本不太有利的差异。AFAIK， 雏菊差异 是唯一专门研究 HTML 的库。它非常适合 HTML 的子集。
如果您使用 Java 和 XHTML， XML单元 允许您通过以下方式比较两个 XML 文档 org.custommonkey.xmlunit.DetailedDiff 班级：
比较和描述所有 两个 XML 文档之间的差异。文档比较不会停止 一旦第一个不可恢复 与 Diff 不同，发现了差异 类。
我相信做到这一点的一个好方法是 将 HTML 渲染为图像 然后使用一些 可以比较图像的 diff 工具 找出差异。
