Haa*_*ked 82 html javascript diff
我有兴趣看到一个很好的差异算法,可能在Javascript中,用于渲染两个HTML页面的并排差异.我们的想法是diff会显示渲染 HTML 的差异.
为了澄清,我希望能够将并排差异视为渲染输出.因此,如果我删除一个段落,并排视图将知道正确的空格.
@Josh完全正确.虽然它可能会显示删除的文本为红色或其他东西.我的想法是,如果我为我的HTML内容使用WYSIWYG编辑器,我不希望必须切换到HTML来做差异.我希望与两个WYSIWYG编辑并排.或者至少在最终用户友好的事情中并排显示差异.
kam*_*ens 17
还有一个很好的技巧可以用来显着改善渲染的HTML差异的外观.虽然这并不能完全解决最初的问题,但它会对渲染的HTML差异的外观产生重大影响.
并排呈现的HTML将使您的diff难以垂直排列.垂直对齐对于比较并排差异至关重要.为了改善并排差异的垂直对齐,您可以在差异应该垂直对齐的"检查点"的每个版本的差异中插入不可见的HTML元素.然后,您可以使用一些客户端JavaScript在检查点周围添加垂直间距,直到两侧垂直排列.
更详细地解释一下:
如果你想使用这种技术,运行你的差异算法,并根据差异,在你的并排版本匹配的任何地方插入一堆visibility:hidden <span>s或小<div>s.然后运行JavaScript,找到每个检查点(及其并排的邻居),并将垂直间距添加到页面上较高(较浅)的检查点.现在,渲染的HTML差异将垂直对齐到该检查点,您可以继续修复并排页面的其余部分的垂直对齐.
Roh*_*and 16
在周末,我发布了一个关于Codeplex的新项目,该项目在C#中实现了HTML diff算法.原始算法是用Ruby编写的.我知道您正在寻找一个JavaScript实现,也许在C#中有一个可用的源代码可以帮助您移植算法.如果您有兴趣,可以使用以下链接:htmldiff.codeplex.com.你可以在这里阅读更多相关信息.
更新:此库已移至GitHub.