背景
最近很多同学读了我的Monaoc Editor专栏后,询问能不能做一个对比文件的功能,这个功能的要点是,在对比文件时,能够动态显示,隐藏没有改变的内容。
经不住读者的拜托,只能抽时间研究了一下GitLab的对比文件功能。
demo效果
核心代码
使用的是 diff
这个文本对比库
https://github.com/kpdecker/jsdiff
npm install diff --save
使用
var diff = JsDiff[window.diffType](textContent1, textContent2);
该方法返回的diff是一个数组,这个数组包含了对比的文本,以及这些文本是删除,还是新增的。
在返回变更对象中。这些对象包含以下字段:
value:文本内容
added:如果该值被插入到新字符串中,则为True
removed:如果该值被从旧字符串中移除