jsdiff 比较文本内容差异

太过爱你忘了你带给我的痛 2023-07-02 06:24 23阅读 0赞

翻译自 [jsdiff ][jsdiff]

JavaScript文本内容差异实现。

基于["An O(ND) Difference Algorithm and its Variations" (Myers, 1986)][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或`parsePatch`or `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 parts
      var color = part.added ? 'green' :
        part.removed ? 'red' : 'grey';
      process.stderr.write(part.value[color]);
    });
    
    console.log();

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

![20200127130327502.png][]

网页中的基本示例

<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 parts
      color = 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文件，您应该看到

![20200127130417739.png][]

**[完整的在线演示][Link 1]**

jsdiff支持IE8及以下版本中存在某些已知问题的所有ES3环境。在这些浏览器下，某些差异算法（例如单词diff）和其他差异算法可能会由于缺乏对捕获`split`操作中组的支持而失败。

[jsdiff]: https://github.com/kpdecker/jsdiff#api
[An O_ND_ Difference Algorithm and its Variations_ _Myers_ 1986]: http://citeseerx.ist.psu.edu/viewdoc/summary?doi=10.1.1.4.6927
[20200127130327502.png]: https://img-blog.csdnimg.cn/20200127130327502.png
[20200127130417739.png]: https://img-blog.csdnimg.cn/20200127130417739.png
[Link 1]: http://kpdecker.github.com/jsdiff