MCP 服务器

diff-mcp

比较两个文本或数据（支持文本差异、JSON、JSON5、YAML、TOML、XML 和 HTML）。由 jsondiffpatch 提供支持。 (Bǐjiào liǎng gè wénběn huò shùjù (zhīchí wénběn chāyì, JSON, JSON5, YAML, TOML, XML hé HTML). Yóu jsondiffpatch tígōng zhīchí.)

README

<img src="demos/html-demo/logo.svg" width="48px" align="center" alt="jsondiffpatch logo" /> <h1 align="center">jsondiffpatch</h1> <a href="https://jsondiffpatch.com">jsondiffpatch.com</a> Diff & patch JavaScript 对象

<a href="https://github.com/benjamine/jsondiffpatch/actions?query=branch%3Amaster"><img src="https://github.com/benjamine/jsondiffpatch/actions/workflows/CI.yml/badge.svg?event=push&branch=master" alt="JsonDiffPatch CI status" /></a> <a href="https://twitter.com/beneidel" rel="nofollow"><img src="https://img.shields.io/badge/created%20by-@beneidel-BACABA.svg" alt="Created by Benjamin Eidelman"></a> <a href="https://opensource.org/licenses/MIT" rel="nofollow"><img src="https://img.shields.io/github/license/benjamine/jsondiffpatch" alt="License"></a> <a href="https://www.npmjs.com/package/jsondiffpatch" rel="nofollow"><img src="https://img.shields.io/npm/dw/jsondiffpatch.svg" alt="npm"></a> <a href="https://github.com/benjamine/jsondiffpatch" rel="nofollow"><img src="https://img.shields.io/github/stars/benjamine/jsondiffpatch" alt="stars"></a>

在线演示

min+gzipped ~ 16KB
浏览器和服务器 (仅 ESM)
深度 diff，使用 delta 进行 patch
使用 LCS 的智能数组 diff，重要提示: 要匹配数组中的对象，您必须提供一个 objectHash 函数（这是对象匹配的方式，否则将使用按位置的简单匹配）。有关更多详细信息，请查看数组 diff 文档
（可选）由 google-diff-match-patch 驱动的长字符串的文本 diff（字符级别 diff）
反转 delta，取消 patch（例如，使用 delta 将对象恢复到其原始状态）
多种输出格式：
- 纯 JSON，低占用空间 delta 格式
- 可视化 diff (html)，请参阅演示
- 注释 JSON (html)，以帮助解释带有注释的 delta 格式
- JSON Patch (RFC 6902)，可以生成 patch，也可以应用它们
- 控制台（彩色），尝试运行 ./node_modules/.bin/jsondiffpatch left.json right.json
- 编写你自己的！查看格式化程序文档
奖励：jsondiffpatch.clone(obj)（深度克隆）

支持的平台

任何支持 ES6 的浏览器
Node.js 18, 20+

用法

在你的终端上：

npx jsondiffpatch --help

console_demo!

或者作为库：

// 示例数据
const country = {
  name: 'Argentina',
  capital: 'Buenos Aires',
  independence: new Date(1816, 6, 9),
};

// 克隆 country，使用 dateReviver 处理 Date 对象
const country2 = JSON.parse(JSON.stringify(country), jsondiffpatch.dateReviver);

// 进行一些更改
country2.name = 'Republica Argentina';
country2.population = 41324992;
delete country2.capital;

const delta = jsondiffpatch.diff(country, country2);

assertSame(delta, {
  name: ['Argentina', 'Republica Argentina'], // 旧值，新值
  population: ['41324992'], // 新值
  capital: ['Buenos Aires', 0, 0], // 已删除
});

// patch 原始对象
jsondiffpatch.patch(country, delta);

// 反转 diff
const reverseDelta = jsondiffpatch.reverse(delta);
// 也可以使用以下方法将 country2 恢复到原始值：jsondiffpatch.unpatch(country2, delta);

const delta2 = jsondiffpatch.diff(country, country2);
assert(delta2 === undefined);
// undefined => 没有差异

数组 diff：

// 示例数据
const country = {
  name: 'Argentina',
  cities: [
    {
      name: 'Buenos Aires',
      population: 13028000,
    },
    {
      name: 'Cordoba',
      population: 1430023,
    },
    {
      name: 'Rosario',
      population: 1136286,
    },
    {
      name: 'Mendoza',
      population: 901126,
    },
    {
      name: 'San Miguel de Tucuman',
      population: 800000,
    },
  ],
};

// 克隆 country
const country2 = JSON.parse(JSON.stringify(country));

// 删除 Cordoba
country.cities.splice(1, 1);

// 添加 La Plata
country.cities.splice(4, 0, {
  name: 'La Plata',
});

// 修改 Rosario，并移动它
const rosario = country.cities.splice(1, 1)[0];
rosario.population += 1234;
country.cities.push(rosario);

// 创建一个配置的实例，按名称匹配对象
const diffpatcher = jsondiffpatch.create({
  objectHash: function (obj) {
    return obj.name;
  },
});

const delta = diffpatcher.diff(country, country2);

assertSame(delta, {
  cities: {
    _t: 'a', // 表示此节点是一个数组（而不是一个对象）
    1: [
      // 在索引 1 处插入
      {
        name: 'Cordoba',
        population: 1430023,
      },
    ],
    2: {
      // 在索引 2 处修改 population (Rosario)
      population: [1137520, 1136286],
    },
    _3: [
      // 从索引 3 处删除
      {
        name: 'La Plata',
      },
      0,
      0,
    ],
    _4: [
      // 从索引 4 移动到索引 2
      '',
      2,
      3,
    ],
  },
});

有关更多示例（嵌套对象或数组，长文本 diff），请查看 packages/jsondiffpatch/test/examples/

如果你想了解 deltas，请参阅 delta 格式文档

安装

NPM

这适用于 node，或者如果你已经在你的应用程序上进行捆绑，则适用于浏览器

npm install jsondiffpatch

import {* as jsondiffpatch} from 'jsondiffpatch';
const jsondiffpatchInstance = jsondiffpatch.create(options);

浏览器

在浏览器中，你可以使用像 esm.sh 或 Skypack 这样的工具加载一个 bundle。

选项

import * as jsondiffpatch from 'jsondiffpatch';

// 仅当你想使用 diff-match-patch 进行文本 diff 时才导入
import { diff_match_patch } from '@dmsnell/diff-match-patch';

const jsondiffpatchInstance = jsondiffpatch.create({
  // 用于在 diff 数组时匹配对象，默认情况下仅使用 === 运算符
  objectHash: function (obj) {
    // 仅当对象通过引用不相等时才使用此函数
    return obj._id || obj.id;
  },
  arrays: {
    // 默认为 true，检测数组内部移动的项目（否则它们将被注册为删除+添加）
    detectMove: true,
    // 默认为 false，移动的项的值不包含在 deltas 中
    includeValueOnMove: false,
  },
  textDiff: {
    // 如果使用文本 diff，则需要通过此属性传入 diff-match-patch 库。
    // 或者，你可以使用 `jsondiffpatch/with-text-diffs` 导入 jsondiffpatch，以避免必须通过选项传入 diff-match-patch。
    diffMatchPatch: diff_match_patch,
    // 默认 60，使用文本 diff 算法的最小字符串长度（左侧和右侧）：google-diff-match-patch
    minLength: 60,
  },
  propertyFilter: function (name, context) {
    /*
       可以指定此可选函数来忽略对象属性（例如，易失性数据）
        name：属性名称，存在于 context.left 或 context.right 对象中
        context：diff 上下文（具有 context.left 和 context.right 对象）
      */
    return name.slice(0, 1) !== '$';
  },
  cloneDiffValues: false /* 默认 false。如果为 true，则将克隆获得的 delta 中的值
      （默认情况下使用 jsondiffpatch.clone），以确保 delta 不保留对左侧或右侧对象的引用。 如果你多次 diff 和 patch 同一个对象而不序列化 deltas，这将变得很有用。
      可以指定一个函数来提供自定义 clone(value) 而不是 true。
      */
  omitRemovedValues: false /* 如果你不需要 unpatch（反转 deltas），
      "old"/"left" 值（已删除或替换）不包含在 delta 中。
      你可以将此设置为 true 以获得更紧凑的 deltas。
      */,
});

可视化 Diff

<!doctype html>
<html>
  <head>
    <link rel="stylesheet" href="./style.css" type="text/css" />
    <link
      rel="stylesheet"
      href="https://esm.sh/jsondiffpatch@0.6.0/lib/formatters/styles/html.css"
      type="text/css"
    />
    <link
      rel="stylesheet"
      href="https://esm.sh/jsondiffpatch@0.6.0/lib/formatters/styles/annotated.css"
      type="text/css"
    />
  </head>
  <body>
    <div id="visual"></div>
    <hr />
    <div id="annotated"></div>
    <script type="module">
      import * as jsondiffpatch from 'https://esm.sh/jsondiffpatch@0.6.0';
      import * as annotatedFormatter from 'https://esm.sh/jsondiffpatch@0.6.0/formatters/annotated';
      import * as htmlFormatter from 'https://esm.sh/jsondiffpatch@0.6.0/formatters/html';

      const left = { a: 3, b: 4 };
      const right = { a: 5, c: 9 };
      const delta = jsondiffpatch.diff(left, right);

      // 美观的 html diff
      document.getElementById('visual').innerHTML = htmlFormatter.format(
        delta,
        left,
      );

      // 自解释 json
      document.getElementById('annotated').innerHTML =
        annotatedFormatter.format(delta, left);
    </script>
  </body>
</html>

要查看格式化程序的实际效果，请查看在线演示。

有关更多详细信息，请查看格式化程序文档

插件

diff(), patch() 和 reverse() 函数是使用 Pipes & Filters 模式实现的，通过在管道上添加或替换过滤器，使其具有极高的可定制性。

有关详细信息，请查看插件文档。

所有贡献者 ✨