网站空间1,wordpress没用,网站logo图怎么做,电子商务网站开发 pdfdiff库介绍
diff 库是基于 Myers 差分算法 实现的 JavaScript 文本差异库。 Myers 差分算法 是由 Eugene Myers 在 1986 年发表的一篇经典算法论文 “An O(ND) Difference Algorithm and its Variations” 中描述的一种高效算法#xff0c;用于计算两个序列#xff08;通常是…diff库介绍
diff 库是基于 Myers 差分算法 实现的 JavaScript 文本差异库。 Myers 差分算法 是由 Eugene Myers 在 1986 年发表的一篇经典算法论文 “An O(ND) Difference Algorithm and its Variations” 中描述的一种高效算法用于计算两个序列通常是字符串之间的差异。
该算法的时间复杂度为 O(ND)其中
N 是两个序列中较短序列的长度。D 是两个序列之间的最小编辑距离即从一个序列变换为另一个序列所需的最少操作次数插入、删除或替换。
通过该算法diff 库可以高效地分析文本之间的差异广泛应用于文本比对、版本管理和实时内容编辑等场景。 在线演示文档
diff 库提供了一个在线演示网站方便用户了解其功能https://kpdecker.github.io/jsdiff
基于在线演示网站我们可以看到diff 库支持字符级词级 行级unified diff等等的差异比较。
前面三个都好理解unified diff则可能需要了解下相应概念。
Unified Diff 和 Patch 的概念
Unified Diff
Unified Diff 是一种标准化的差异格式用于描述两个文本文件之间的变化广泛使用于版本控制系统如 Git。它通过行号和上下文信息展示新增、删除或修改的内容是 diff 工具生成的输出格式之一。
一个 Unified Diff 的典型结构如下
--- oldFile.txtnewFile.txt-1,4 1,4 Line 1
-Line 2
Line 2 updatedLine 3Line 4解释
--- oldFile.txt 和 newFile.txt分别表示旧文件和新文件的文件名。-1,4 1,4 上下文范围的描述。
-1,4 表示旧文件从第 1 行开始的 4 行。
1,4 表示新文件从第 1 行开始的 4 行。
- 表示从旧文件中移除的内容。表示添加到新文件中的内容。Patch
Patch 是应用这些差异的一种工具通常配合 Unified Diff 使用。patch 工具可以读取 Unified Diff 格式的文件并将其应用到目标文件上以实现对文件的更新。
diff 库中的 createPatch 方法生成的就是一个 Unified Diff 格式的输出。可以用这个输出作为输入再使用 applyPatch 方法将这些差异应用到目标文本中。 diff库比对的基本流程
diff 库的所有diff函数都用于比较两个文本并执行以下三个步骤
1. 将文本分割为 “tokens”
Token 的定义Token 是文本中的最小单位其定义根据所使用的 diff 方法而变化 在 diffChars 方法中每个字符是一个token。在 diffWords 方法中每个单词是一个token。在 diffLines 方法中每一行是一个token。
通过这种分割方式diff 库能够灵活地比较文本的不同层次如字符、单词或行。 2. 找到最小的操作集合
目标通过最少的插入和删除操作将第一个 token 数组转换为第二个 token 数组。相等的定义 默认情况下两个 token 是否相等由 运算符决定。某些 diff 方法支持自定义“相等”定义。例如 默认比较中diffChars(Foo, FOOD) 会认为 o 和 O 不相等 结果删除两个 o插入两个 O 和一个 D。 设置选项 { ignoreCase: true } 后o 和 O 会被视为相等 结果仅需要插入一个 D。 3. 返回变换结果
返回值一个数组表示从旧文本到新文本的转换过程。 数组结构包含一系列 change objects。顺序从输入的起始位置到结束位置按顺序排列。change objects 的含义 插入在新文本中添加一个或多个 tokenadded: true。删除从旧文本中删除一个或多个 tokenremoved: true。保留保持一个或多个 token 不变无 added 或 removed 标记。 示例代码
以下是 diffChars 的一个简单示例
import { diffChars } from diff;const oldText Foo;
const newText FOOD;// 默认比较区分大小写
const result diffChars(oldText, newText);
console.log(result);
/* 数据格式
[{ value: F, count: 1 },{ removed: true, value: o },{ removed: true, value: o },{ added: true, value: O },{ added: true, value: O },{ added: true, value: D }
]
*/// 忽略大小写
const resultIgnoreCase diffChars(oldText, newText, { ignoreCase: true });
console.log(resultIgnoreCase);
/* 数据格式
[{ value: Foo, count: 3 },{ added: true, value: D }
]
*/diff 库安装与使用
1. 安装库
通过 npm 安装
npm install --save diff2. 在项目中导入
在 Vue 项目中可以通过以下方式引入库中所需的功能
import { diffWords } from diff;3. 在 Vue 项目中使用
在 Vue 项目中可以将比对函数与 v-html 指令结合动态渲染高亮比对的结果。
组件模板
templatediv v-htmlgetYellowDiffText(tableName1, tableName2)/div
/template组件逻辑
script
import { diffWords } from diff;export default {data() {return {tableName1: Hello world!,tableName2: Hello my friend!,};},methods: {/** 比较两个字符串标记差异部分为黄色diff库比对结果状态只有added和removed新增部分即存在差异部分 */getYellowDiffText(tableName1, tableName2) {let htmltext ;let diffs [];if (!tableName2) {diffs [{ value: tableName1 }];} else {diffs diffWords(tableName1, tableName2);}diffs.forEach((item) {htmltext item.added? span stylebackground-color: yellow;${item.value}/span: item.removed? // 个人项目需求不需要比对删除情况有需求的可以自行处理: item.value;});return htmltext;},},
};
/scriptdiff库配置
可配置忽略空白字符、大小写等比较选项。
