jsdiff 比较文本内容差异

翻译自 jsdiff

JavaScript文本内容差异实现。

基于"An O(ND) Difference Algorithm and its Variations" (Myers, 1986) 中提出的算法。

安装

npm install diff --save

API

Diff.diffChars(oldStr, newStr[, options]) -区分两个文本块，逐字符比较。

返回更改对象列表（请参见下文）。

选件
- ignoreCase：true忽略大小写差异。默认为false。
Diff.diffWords(oldStr, newStr[, options]) -区分两个文本块，逐字比较，忽略空格。

返回更改对象列表（请参见下文）。

选件
- ignoreCase：与中的相同diffChars。
Diff.diffWordsWithSpace(oldStr, newStr[, options]) -区分两个文本块，逐字比较，将空白视为有效。

返回更改对象列表（请参见下文）。
Diff.diffLines(oldStr, newStr[, options]) -比较两个文本块，逐行比较。

选件
- ignoreWhitespace：true忽略开头和结尾的空格。这和diffTrimmedLines
- newlineIsToken：true将换行符视为单独的标记。这允许换行结构的更改独立于行内容而发生，并照此处理。一般来说，这是更加人性化友好的形式diffLines和diffLines更适合贴片机等计算机友好的输出。
返回更改对象列表（请参见下文）。
Diff.diffTrimmedLines(oldStr, newStr[, options]) -区分两个文本块，逐行比较，忽略前导和尾随空格。

返回更改对象列表（请参见下文）。
Diff.diffSentences(oldStr, newStr[, options]) -区分两个文本块，逐句比较。

返回更改对象列表（请参见下文）。
Diff.diffCss(oldStr, newStr[, options]) -比较两个文本块，比较CSS标记。

返回更改对象列表（请参见下文）。
Diff.diffJson(oldObj, newObj[, options])-比较两个JSON对象，比较每个对象上定义的字段。在此比较中，字段的顺序等并不重要。

返回更改对象列表（请参见下文）。
Diff.diffArrays(oldArr, newArr[, options]) -比较两个数组，比较每个项目是否严格相等（===）。

选件
- comparator：function(left, right)用于自定义相等性检查
返回更改对象列表（请参见下文）。
Diff.createTwoFilesPatch(oldFileName, newFileName, oldStr, newStr, oldHeader, newHeader) -创建一个统一的差异补丁。

参数：
- oldFileName ：将在修补程序的文件名部分中输出的字符串，以供删除
- newFileName ：要在增补程序的文件名部分中输出的字符串
- oldStr ：原始字符串值
- newStr ：新的字符串值
- oldHeader ：旧文件标题中包含的其他信息
- newHeader ：新文件头中包含的其他信息
- options：带有选项的对象。当前，仅context支持，并且描述应包括多少行上下文。
Diff.createPatch(fileName, oldStr, newStr, oldHeader, newHeader) -创建一个统一的差异补丁。

就像Diff.createTwoFilesPatch一样，但是oldFileName等于newFileName。
Diff.structuredPatch(oldFileName, newFileName, oldStr, newStr, oldHeader, newHeader, options) -返回带有大块对象数组的对象。

此方法类似于createTwoFilesPatch，但是返回适合进一步处理的数据结构。参数与createTwoFilesPatch相同。返回的数据结构可能如下所示：
```
{oldFileName: 'oldfile', newFileName: 'newfile',oldHeader: 'header1', newHeader: 'header2',hunks: [{oldStart: 1, oldLines: 3, newStart: 1, newLines: 3,lines: [' line2', ' line3', '-line4', '+line5', '\\ No newline at end of file'],}]
}
```
Diff.applyPatch(source, patch[, options]) -应用统一的差异补丁。

返回一个字符串，其中包含提供的数据的新版本。patch可以是字符串diff或parsePatchor structuredPatch方法的输出。

可选options对象可能具有以下键：
- fuzzFactor：拒绝补丁之前允许变化的行数。默认为0。
- compareLine(lineNumber, line, operation, patchContent)：回调用于与给定的行进行比较，以确定修补时是否应将它们视为相等。默认为严格相等，但可以被覆盖以提供更模糊的比较。如果应拒绝行，则应返回false。
Diff.applyPatches(patch, options) -应用一个或多个补丁。

此方法将迭代补丁程序的内容，并应用于通过回调提供的数据。每个补丁程序索引的一般流程为：
- options.loadFile(index, callback)叫做。然后，调用方应加载文件的内容，然后将其传递给callback(err, data)回调。传递err将会终止进一步的补丁程序执行。
- options.patched(index, content, callback)一旦应用了补丁，就会调用。content将是的返回值applyPatch。准备就绪后，调用方应调用callback(err)回调。传递err将会终止进一步的补丁程序执行。
一旦应用了所有补丁或发生错误，便进行options.complete(err)回调。
Diff.parsePatch(diffStr) -将补丁解析为结构化数据

返回补丁的JSON对象表示形式，适合与applyPatch方法一起使用。这将解析为返回的相同结构Diff.structuredPatch。
convertChangesToXML(changes) -将更改列表转换为序列化的XML格式

callback当省略该参数时，上面所有接受可选方法的方法将在同步模式下运行，而在提供该参数时将在异步模式下运行。这允许更大的差异而不阻塞事件循环。这可以直接作为最终参数或作为对象中的callback字段传递options。

变更物件

上面的许多方法都返回更改对象。这些对象包含以下字段：

value：文字内容
added：如果将值插入到新字符串中，则为True
removed：如果从旧字符串中删除了值，则为true

请注意，某些情况下可能会省略特定的标志字段。对标记字段的比较应始终以真实或错误的方式进行。

例子

Node中的基本示例

require('colors');
var Diff = require('diff');var one = 'beep boop';
var other = 'beep boob blah';var diff = Diff.diffChars(one, other);diff.forEach(function(part){// green for additions, red for deletions// grey for common partsvar color = part.added ? 'green' :part.removed ? 'red' : 'grey';process.stderr.write(part.value[color]);
});console.log();

运行上面的程序应该会产生

网页中的基本示例

<pre id="display"></pre>
<script src="diff.js"></script>
<script>
var one = 'beep boop',other = 'beep boob blah',color = '',span = null;var diff = Diff.diffChars(one, other),display = document.getElementById('display'),fragment = document.createDocumentFragment();diff.forEach(function(part){// green for additions, red for deletions// grey for common partscolor = part.added ? 'green' :part.removed ? 'red' : 'grey';span = document.createElement('span');span.style.color = color;span.appendChild(document.createTextNode(part.value));fragment.appendChild(span);
});display.appendChild(fragment);
</script>

在浏览器中打开上述.html文件，您应该看到