在 JavaScript 中， diff 通常指的是比较两个值或对象之间的差异。这在版本控制、数据同步和测试中非常有用。你可以使用各种库来实现这一功能， deep-diff 或 jsondiffpatch。这些库可以帮助你找出两个对象之间的具体差异，并以结构化的方式返回结果。

diff JS是一款功能强大的JavaScript库，专门用于比较两个文本字符串之间的差异，它不仅适用于浏览器环境，也可以在Node.js环境中运行，这使得它在各种应用场景下都非常实用，无论是版本控制系统、文本编辑器还是协作平台，diff JS都能提供高效、灵活的解决方案。

### 安装与引入

你可以通过多种方式安装和使用diff JS，通过npm或yarn进行安装：

“`bash

npm install diff

“`

或者在HTML文件中通过CDN引入：

“`html

“`

### 基本用法

#### 按字符比较

按字符比较是diff JS最基本的功能之一，可以逐字符地比较两段文本并返回差异信息，以下是一个示例：

“`javascript

const Diff = require(‘diff’);

const oldStr = ‘Hello World’;

const newStr = ‘Hello Javascript World’;

const diff = Diff.diffChars(oldStr, newStr);

diff.forEach((part) => {

const color = part.added ? ‘green’ :

part.removed ? ‘red’ : ‘grey’;

console.log(`${part.value} ${color}`);

});

“`

输出结果为：

“`

H grey

e grey

l grey

l grey

o grey

space grey

J green

a green

v green

a green

S green

c green

r green

i green

p green

t green

green

W grey

o grey

r grey

l grey

d grey

“`

在这个例子中，添加的部分用绿色显示，删除的部分用红色显示，未变部分用灰色显示。

#### 按单词比较

按单词比较可以忽略多余的空格，仅对单词级别的变化进行比较，以下是一个示例：

“`javascript

const Diff = require(‘diff’);

const oldStr = ‘I love programming.’;

const newStr = ‘We love coding.’;

const diff = Diff.diffWords(oldStr, newStr);

diff.forEach((part) => {

const color = part.added ? ‘green’ :

part.removed ? ‘red’ : ‘grey’;

console.log(`${part.value} ${color}`);

});

“`

输出结果为：

“`

We green

I red

love grey

coding. green

programming. red

“`

#### 按行比较

按行比较适用于多行文本的比较，可以配置是否忽略首尾空格，以下是一个示例：

“`javascript

const Diff = require(‘diff’);

const oldStr = `Line one

Line two

Line three`;

const newStr = `Line one

Line 2

Line three`;

const diff = Diff.diffLines(oldStr, newStr);

diff.forEach((part) => {

const color = part.added ? ‘green’ :

part.removed ? ‘red’ : ‘grey’;

console.log(`${part.value} ${color}`);

});

“`

输出结果为：

“`

Line one grey

grey

Line two red

Line 2 green

Line three grey

“`

### 创建和应用补丁

diff JS不仅可以比较文本，还可以生成和应用补丁，这对于版本控制非常有用，以下是一个创建和应用补丁的示例：

#### 创建补丁

“`javascript

const Diff = require(‘diff’);

const oldStr = ‘Hello World’;

const newStr = ‘Hello Javascript World’;

const patch = Diff.createPatch(‘filename.txt’, oldStr, newStr);

console.log(patch);

“`

输出结果为：

“`

Index: filename.txt

@@ -1,1 +1,1 @@

-Hello World

+Hello Javascript World

“`

#### 应用补丁

“`javascript

const Diff = require(‘diff’);

const oldStr = ‘Hello World’;

const patch = `Index: filename.txt

–filename.txt

+++ filename.txt

@@ -1,1 +1,1 @@

-Hello World

+Hello Javascript World`;

const newStr = Diff.applyPatch(oldStr, patch);

console.log(newStr); // 输出：Hello Javascript World

“`

### 比较数组和JSON对象

除了字符串，diff JS还可以比较数组和JSON对象，以下是一个比较数组的示例：

“`javascript

const Diff = require(‘diff’);

const oldArr = [‘apple’, ‘banana’, ‘cherry’];

const newArr = [‘apple’, ‘blueberry’, ‘cherry’, ‘date’];

const diff = Diff.diffArrays(oldArr, newArr);

diff.forEach((part) => {

const added = part.added ? ‘+’ : ”;

const removed = part.removed ? ‘-‘ : ”;

console.log(`${added}${removed}${part.value}`);

});

“`

输出结果为：

“`

apple

-banana

+blueberry

cherry

+date

“`

对于JSON对象的比较，可以使用`diffJson`方法：

“`javascript

const Diff = require(‘diff’);

const oldObj = { a: ‘1’, b: ‘2’, c: { temp1: ‘aaa’, temp2: ‘bbb’ }, d: [{ id: ‘111’, text: ‘asd’ }, { id: ‘222’, text: ‘asdsa’ }] };

const currentObj = { a: ‘1’, b: ’45’, c: { temp1: ‘aaa’, temp3: ‘ccc’ }, d: [{ id: ‘111’, text: ‘asd’ }, { id: ‘333’, text: ‘xswedc’ }] };

const diff = Diff.diffJson(oldObj, currentObj);

console.log(diff);

“`

### 表格展示差异（Table of）

为了更直观地展示文本差异，可以使用HTML表格来呈现，以下是一个简单的示例：

“`html

<a href="https://www.xixizhuji.com/ask/tag/diff-js" target="_blank" title="View all posts in Diff JS">Diff JS</a> Example

比较文本差异（只适合比较纯文本且不带html标签）

Chars Words Lines

“`这个示例展示了如何使用HTML表格和JavaScript来实现文本差异的实时比较和展示，用户可以通过选择不同的比较类型（字符、单词、行）来查看不同级别的差异。