我有兴趣看到一种很好的diff算法(可能是Java语言),用于呈现两个HTML页面的并排diff。想法是,差异将显示 呈现的 HTML 的差异。
为了澄清,我希望能够将并排差异 作为 渲染输出。因此,如果我删除一个段落,并排视图将知道正确地隔开空间。
完全是@Josh。虽然也许它将以红色或其他形式显示已删除的文本。这样的想法是,如果我对HTML内容使用WYSIWYG编辑器,则不需要切换到HTML进行比较。我想与两个所见即所得的编辑并排执行。或至少在最终用户友好的问题上并排显示差异。
您还可以使用另一个不错的技巧来显着改善呈现的HTML差异的外观。尽管这不能完全解决最初的问题,但将在呈现的HTML差异的外观上产生重大差异。
并排呈现的HTML将使您的差异很难垂直对齐。垂直对齐对于比较并排差异至关重要。为了改善并排diff的垂直对齐方式,您可以在diff的每个版本中的“检查点”处将diff垂直对齐,以插入不可见的HTML元素。然后,您可以使用一些客户端JavaScript在检查点周围添加垂直间距,直到侧面垂直对齐为止。
详细解释:
如果要使用此技术,请运行diff算法,并在并排版本应该匹配的位置插入一堆visibility:hidden <span>s或tiny <div>。然后运行JavaScript,以找到每个检查点(及其并排的相邻点),并向页面上较高(较浅)的检查点添加垂直间距。现在,您呈现的HTML差异将一直垂直对齐到该检查点,并且您可以继续在其余的并排页面下修复垂直对齐。
visibility:hidden
<span>
<div>