google-diff-match-patch文本内容对比的使用

项目里面用到了文本的对比功能，就用了下google-diff-match-patch，不过也是只用了文件对比功能。这里来看一下是怎么使用的。

参考链接：

google-diff-match-patch

Diff demo

Github地址

这个库支持多语言，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地址，源代码直接页面调试就可以看到

http://avery.coding.me/goodgoodstudy/html/diff.html