仿GitLab MR 是的对比文件内容,可以动态显示,隐藏没有变化的文件内容

背景

最近很多同学读了我的Monaoc Editor专栏后,询问能不能做一个对比文件的功能,这个功能的要点是,在对比文件时,能够动态显示,隐藏没有改变的内容。

经不住读者的拜托,只能抽时间研究了一下GitLab的对比文件功能。
仿GitLab MR 是的对比文件内容,可以动态显示,隐藏没有变化的文件内容_第1张图片

demo效果

仿GitLab MR 是的对比文件内容,可以动态显示,隐藏没有变化的文件内容_第2张图片

核心代码

使用的是 diff 这个文本对比库
https://github.com/kpdecker/jsdiff
npm install diff --save

使用
var diff = JsDiff[window.diffType](textContent1, textContent2);

该方法返回的diff是一个数组,这个数组包含了对比的文本,以及这些文本是删除,还是新增的。
仿GitLab MR 是的对比文件内容,可以动态显示,隐藏没有变化的文件内容_第3张图片
在返回变更对象中。这些对象包含以下字段:

value:文本内容
added:如果该值被插入到新字符串中,则为True
removed:如果该值被从旧字符串中移除

你可能感兴趣的:(Monaco,Editor编辑器教程,前端)