项目里面用到了文本的对比功能,就用了下google-diff-match-patch,不过也是只用了文件对比功能。这里来看一下是怎么使用的。
参考链接:
这个库支持多语言,demo是直接使用javascript做的。
下面的使用是根据wiki和自己的一些简单的理解来写的
Introduction
不同的语言使用的方法是一样的,不同语言的使用首先都要先引入这个library。
使用的时候,先创建一个diff_match_patch对象,这个对象内就包含我们所要使用的对比方法。
按照google的javascript的demo,创建对象
var dmp = new diff_match_patch();
对比,就可以得出对比结果
var d = dmp.diff_main(text1, text2);
安装文档的说明,这个文本的对比结果对用户不一定友好,比如我们完全改变了2段文字,但是去对比的话,可能得出的结果是按照一个一个字母的顺序去对比,得出的结果就不是我们想要的,所以就要用到其他的两个方法,对用户的友好程度会好一些,这个地方可以根据使用在demo的页面尝试选择方法。比较简单的是使用
dmp.diff_cleanupSemantic(d);
如果更好一些我们可以使用,然后根据自已定义的Diff_EditCost得出我们更想要的结果
dmp.diff_cleanupEfficiency(d);
如果需要展示到页面,可以使用diff_prettyHtml
dmp.diff_prettyHtml(d);
简易的javascript实现代码
let diffUntil = new diff_match_patch();
function diffText(diffType) { // 3个对比调用一个方法,传入不同参数而已
let text1 = document.getElementById('text1').value; // 文本域1
let text2 = document.getElementById('text2').value; // 文本域2
let editCost = document.getElementById('editCost').value || 4; // 没填的时候默认为4
let d = diffUntil.diff_main(text1, text2); // 对比
if (diffType === 'semantic') {
diffUntil.diff_cleanupSemantic(d);
}
if (diffType === 'efficiency'){
diffUntil.Diff_EditCost = parseInt(editCost);
diffUntil.diff_cleanupEfficiency(d);
}
let diffHtml = diffUntil.diff_prettyHtml(d); // 转化为html
document.getElementById('result').innerHTML = diffHtml;
}
Demo地址,源代码直接页面调试就可以看到