前端借助jsdiff库实现文本差异对比

今天介绍一个比较特殊的js库

因为, 平常我们开发过程中, 基本不会遇到这种场景, 但是我们却经常在用这些功能, jsdiff可以进行文本比较, 经常会用到版本控制系统和文本编辑器, 协作平台等等

它基于Myers提出的O(ND)算法，可以高效地计算出两个文本块的差异

http://www.xmailserver.org/diff2.pdf

看完大致效果, 我们来利用jsdiff来实现一下该功能

首先, 我们需要安装jsdiff

npm install diff –save

在需要展示的页面进行引入就可以使用了

import * as Diff from “diff”;
我们写一个简单的例子, 顺便看一下打印结果

确实比对出来了, 但是呢, 并没有颜色支撑, 感觉怪怪的, 所以, 我们需要使用diff2html库实现差异高亮

先来安装一下diff2html库

npm install diff2html –save
安装完成之后, 我们在该页面进行引入

import * as Diff2Html from “diff2html”;
import “diff2html/bundles/css/diff2html.min.css”;
再调用其html Api将其转化成html元素进行渲染即可

我们看一下大致效果

大家以后做文本差异对比需求的时候, 可以选择jsdiff和diff2html这两个库来实现

接下来, 我给大家介绍一下jsdiff的其他API

diffChars

对两个文本进行字符级别的差异比较

diffWords

对两个文本进行单词级别的差异比较

diffLines

对两个文本按行进行比较

diffCss

对css代码进行差异比较

diffJson

对两个json对象进行差异比较, 会将其序列化为格式化的json文本进行逐行比较

diffArrays

对两个数组进行差异比较, 使用严格相等检查每一个元素

大家如果对今天分享的感兴趣, 可以搜索下方链接, 学习更多API

https://gitcode.com/gh_mirrors/js/jsdiff/overview
今天, 我们就分享到这里

我们下期见