Demo: http://localnote.sinaapp.com/htmldiff.html
Github: https://github.com/zhoujq/htmldiff.git
这几天工作上有个需求,需要在前端来做文档的历史比对;文档因由富文本编辑器生成,并不是单纯的文字组成,其中包括了大量的html标签;但是用户能看到的内容只是可视的文本,所以要求我们在做比对的时候能合理的处理html标签;
这个HTML Diff的主要算法来自于:http://www.rohland.co.za/index.php/2009/10/31/csharp-html-diff-algorithm/
有C# 和 Ruby版本的实现,但是对汉字分字都有问题;这次在做JS版本的时候,将原有的拆分解析逻辑简单的通过正则来实现;效率上并没有什么影响,相对还要简单很多;暂时还未遇到明显的Bug;
代码的实现上在针对高级浏览器时做了简单web Worker支持,是否以webWorker的方式来使用本程序,还需要由业务开发者来自行判断;
整个代码的执行效率相对较低,再对大文本的比对时,耗时相对较长;比对的时间消耗,主要与文档内的文字数量、差异数量相关;
代码内还有密集运算未进行优化,因为初期只针对高版本的Chrome浏览器,所以优化先放放再说~
效果图: