当前位置: 首页 > Web前端 > JavaScript

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

时间:2023-03-27 18:22:05 JavaScript

项目使用了文本比较功能,所以使用了google-diff-match-patch,但只使用了文件比较功能。下面是如何使用它。参考链接:google-diff-match-patchDiffdemoGithub地址本库支持多国语言,demo直接使用javascript制作。下面的用法是根据wiki和自己的一些简单理解写的。不同语言使用的方法是一样的。不同语言的使用首先要引入这个库。在使用的时候,首先创建一个diff_match_patch对象,里面包含了我们要使用的比较方法。根据谷歌的javascript演示,创建一个对象vardmp=newdiff_match_patch();比较,可以得到比较结果vard=dmp.diff_main(text1,text2);根据安装文档中的说明,这段文字的对比结果,对用户来说并不容易一定是友好的。比如我们把两段文字完全改了,但是如果我们比较的话,结果可能是按照字母的顺序一个一个比较的。结果不是我们想要的,所以我们需要使用其他两种方式,更加人性化,大家可以根据demo中使用的页面尝试选择一种方式。使用dmp.diff_cleanupSemantic(d)比较简单;如果更好,我们可以使用它,然后根据自定义的Diff_EditCostdmp.diff_cleanupEfficiency(d)得到我们更想要的结果;如果需要在页面上显示,可以使用diff_prettyHtmldmp.diff_prettyHtml(d);简单的javascript实现代码letdiffUntil=newdiff_match_patch();functiondiffText(diffType){//三个比较调用一个方法,传入不同的参数即可lettext1=document.getElementById('text1').value;//文本字段1lettext2=document.getElementById('text2').value;//文本字段2leteditCost=document.getElementById('editCost').value||4;//不填时默认为4letd=diffUntil.diff_main(text1,text2);//比较if(diffType==='semantic'){diffUntil.diff_cleanupSemantic(d);}if(diffType==='efficiency'){Uuntil.diffDiff_EditCost=parseInt(editCost);diffUntil.diff_cleanupEfficiency(d);}让diffHtml=diffUntil.diff_prettyHtml(d);//转成htmldocument.getElementById('result').innerHTML=diffHtml,直接代码源地址页面调试后可以看到http://avery.coding.me/goodgo...作者:avery1链接:https://www.jianshu.com/p/523...来源:简书版权归作者所有。如需商业转载,请联系作者获得授权。非商业转载请注明出处。