任何人都有渲染HTML的diff算法？

我有兴趣看到一个很好的差异算法,可能在Javascript中,用于渲染两个HTML页面的并排差异.我们的想法是diff会显示渲染 HTML 的差异.

为了澄清,我希望能够将并排差异视为渲染输出.因此,如果我删除一个段落,并排视图将知道正确的空格.

@Josh完全正确.虽然它可能会显示删除的文本为红色或其他东西.我的想法是,如果我为我的HTML内容使用WYSIWYG编辑器,我不希望必须切换到HTML来做差异.我希望与两个WYSIWYG编辑并排.或者至少在最终用户友好的事情中并排显示差异.

还有一个很好的技巧可以用来显着改善渲染的HTML差异的外观.虽然这并不能完全解决最初的问题,但它会对渲染的HTML差异的外观产生重大影响.

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

更详细地解释一下:

如果你想使用这种技术,运行你的差异算法,并根据差异,在你的并排版本匹配的任何地方插入一堆visibility:hidden s或小