数码资讯
使用JS实现HTML Diff文本差异化比对功能(html嵌入javascript用哪个标记)
Demo: http://localnote.sinaapp.com/htmldiff.html Github: https://github.com/zhoujq/htmldiff.git 这几天工作上有个需求,需要在前端来做文档的历史比对;文档因由富文本编辑器生成,并不是单纯的文字组成,其中包括
选购提示
关注价格、性能、续航、售后和真实使用场景,理性比较后再下单。
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浏览器,所以优化先放放再说~
效果图:
声明:本文内容用于数码产品信息整理与选购参考,具体价格、库存、售后政策以官方渠道和电商页面实时信息为准。