文本差异比较工具jsdifflib介绍

IT那活儿 2022-10-30

2882

点击上方“IT那活儿”公众号，关注后了解更多内容，不管IT什么活儿，干就完了！！！

今天分享一个用来比较文本差异的JavaScript库，可以实现类似于Git的文件版本差异比较功能。

先看一下使用效果图，jsdifflib可以通过side by side和inline两种方式来比较文本差异，内容的新增、修改和删除能够通过不同颜色来区分。

jsdifflib在工程中如何使用呢？

首先需要去开源网站下载jsdifflib库，下载完成后放到工程的静态资源处。

新建一个fileDiff.html文件，该文件主要用来展示差异比较结果，引用Jquery库和jsdifflib的Js和Css文件。

在body标签内放入左右文本元素以及比较的触发按钮。

在JavaScript中放入diffUsingJS方法，该方法通过调用jsdifflib库实现文本差异比较，方法包含一个参数，用来控制side by side和inline两种展示方式。

以上就是fileDiff.html文件的主要内容，我们在使用过程中通过父页面触发方式来打开比较页，这里使用layui的弹框实现，在弹框完成的回调方法中向fileDiff.html传入新旧文本内容，并调用diffUsingJS方法来渲染差异结果。

jsdifflib还有基于Python的使用方式，感兴趣的朋友可以私下尝试。

文章转载自IT那活儿，如果涉嫌侵权，请发送邮件至：contact@modb.pro进行举报，并提供相关证据，一经查实，墨天轮将立刻删除相关内容。