diff-match-patch对比使用

最新推荐文章于 2024-09-12 14:20:13 发布

Lan_Lan99

最新推荐文章于 2024-09-12 14:20:13 发布

阅读量4.9k

点赞数 2

分类专栏： JavaScript vue 文章标签： dfs javascript vue.js

本文链接：https://blog.csdn.net/weixin_37817251/article/details/115695155

版权

本文介绍了如何使用 diff-match-patch 库实现类似 Git 的代码行对比功能。通过 npm 安装该库后，重点讨论了 diff_linesToChars_、diff_main 和 diff_charsToLines_ 方法，并提供了组件化实现的示例，适用于 JavaScript 和 Vue.js 项目。文中还分享了如何根据需求整理对比结果数组的代码。

摘要由CSDN通过智能技术生成

写一个代码比对工具，想跟git提交代码时一样，可以进行每一行的对比，比如单独行的增加、删除，以及每一行中有些单词的不同，使用的插件是 diff-match-patch，下面大致写一下过程，这个写了个小的组件，里面有相对应的js和vue，连接如下，如果需要可参考 https://blog.csdn.net/weixin_37817251/article/details/116455307（仅供参考）

使用 npm install diff-match-patch 下载

定义标识

const DIFF_DELETE = -1; //删除
const DIFF_INSERT = 1; //新增
const DIFF_EQUAL = 0; //相同

使用的主要方法是：diff_linesToChars_和diff_main以及diff_charsToLines_，具体的返回值，如果想去看的话可以打印看一下，下面直接上代码

// text1和text2是左右两侧的文本

function diff_lineMode(text1, text2) {
  var dmp = new DiffMatchPatch();
  var a = dmp.diff_linesToChars_(text1, text2);
  var lineText1 = a.chars1;
  var lineText2