怎么在业务系统里实现文档对比功能

今年我们公司开发合同管理功能的时候，业务部门提出了一个需求：修改的合同需要和历史合同做对比，能清晰的看到修改的内容。

目前我们只要百度一下，就能找到对比插件，所以我们觉得这东西挺容易，这时候我们还不知道这就是噩梦的开端。

首先，我们测试了vue-code-diff，结果如下： 

 与我们想要的效果有点差距，第一段其实我们只是插入了一部分的文字，第二段我们删除了一点文字，第三段我们修改了一些文字，可是这个插件没能定位到修改的地方。

然后，我们尝试了Jquery-Html-diff（https://www.dreamfans.cn/demos/Jquery-Html-diff/），结果如下：

 到这里我们绝对非常完美，这就是我们想要的效果。但是我们忽略另一个问题，我们对比的其实不只是文本，我们对比的其实是html代码，展示的内容是文本。使用这种对比的时候，我们会丢失掉原来的样式……,结果如下：

于是这个方案也失败了……

后来我还尝试了Mergely（https://github.com/wickedest/Mergely），效果如下：

还有diff2html-cli（https://github.com/rtfpessoa/diff2html-cli#examples），效果如下：

 基本无法满足业务部门的要求，开发人员遇到了巨大的挑战。前端开发陷入了绝望……

最后我们决定前后端配合着来做，实现了如下的效果：

完美的满足了业务部门的需求。

这里用到的是谷歌的一个工具：https://github.com/google/diff-match-patch

不得不感叹，google大大yyds，简化了我们的工作量，效果比我们自己做的还好很多。