快捷導(dǎo)航

前端實(shí)現(xiàn)文本對(duì)比并高亮顯示差異的方法

更新時(shí)間：2024年09月29日 08:57:13 作者：李牌牌you

文本對(duì)比是一個(gè)常見(jiàn)需求,尤其在版本控制和代碼編輯中,本文介紹了如何使用jsdiff庫(kù)和diff2html工具來(lái)實(shí)現(xiàn)文本內(nèi)容的差異比較和美化顯示,文中通過(guò)圖文介紹的非常詳細(xì),需要的朋友可以參考下

你有沒(méi)有想過(guò)，常見(jiàn)的代碼差異對(duì)比是如何都實(shí)現(xiàn)的呢？其實(shí)這里面涉及到非常復(fù)雜的文本對(duì)比算法，本文就來(lái)看看如何通過(guò)現(xiàn)有工具庫(kù) jsdiff + diff2html 實(shí)現(xiàn)文本對(duì)比，并高亮顯示差異！

文本對(duì)比

文本對(duì)比可以借助 jsdiff 來(lái)實(shí)現(xiàn)，jsdiff 是一個(gè) JavaScript 庫(kù)，用于實(shí)現(xiàn)文本差異比較。這個(gè)庫(kù)提供了多種方法來(lái)計(jì)算和展示兩個(gè)文本之間的差異，可以用于多種文本差異比較的場(chǎng)景，比如版本控制、文檔比較、代碼編輯器中的變更高亮等。

jsdiff 基于 Myers 在 1986 年提出的 "An O(ND) Difference Algorithm and its Variations" 算法實(shí)現(xiàn)。

jsdiff 是一個(gè)非常熱門(mén)的工具庫(kù)，其 npm 周下載量高達(dá) 4000 萬(wàn)，很多知名前端工具庫(kù)都依賴(lài)它：

Github：https://github.com/kpdecker/jsdiff

以下是 jsdiff 提供的 API：

diffChars - 對(duì)兩個(gè)文本進(jìn)行字符級(jí)別的差異比較。
diffWords - 對(duì)兩個(gè)文本進(jìn)行單詞級(jí)別的差異比較，忽略空白字符。
diffWordsWithSpace - 對(duì)兩個(gè)文本進(jìn)行單詞級(jí)別的差異比較，考慮空白字符作為分隔符。
diffLines - 對(duì)兩個(gè)文本按行進(jìn)行差異比較。
diffSentences - 對(duì)兩個(gè)文本按句子進(jìn)行差異比較。
diffCss - 專(zhuān)門(mén)用于比較 CSS 代碼的差異。
diffJson - 比較兩個(gè) JSON 對(duì)象的差異，首先將它們序列化為格式化的 JSON 文本，然后逐行比較。
diffArrays - 比較兩個(gè)數(shù)組，檢查數(shù)組元素的嚴(yán)格等同性。
createTwoFilesPatch - 創(chuàng)建一個(gè)包含兩個(gè)文件差異的補(bǔ)丁。
createPatch - 創(chuàng)建一個(gè)補(bǔ)丁，通常用于一個(gè)文件的前后變化。
applyPatch - 應(yīng)用一個(gè)給定的補(bǔ)丁到源文本上。
applyPatches - 應(yīng)用一個(gè)或多個(gè)補(bǔ)丁到相應(yīng)的文件內(nèi)容上。
parsePatch - 解析一個(gè)補(bǔ)丁字符串為結(jié)構(gòu)化的數(shù)據(jù)。
reversePatch - 反轉(zhuǎn)一個(gè)補(bǔ)丁，使得應(yīng)用此補(bǔ)丁會(huì)撤銷(xiāo)原始的更改。
convertChangesToXML - 將差異對(duì)象轉(zhuǎn)換為 XML 格式。
convertChangesToDMP - 將差異對(duì)象轉(zhuǎn)換為 Google 的 diff-match-patch 庫(kù)的格式。

在使用 jsdiff 時(shí)，首先需要通過(guò)以下命令來(lái)安裝：

npm install diff --save

安裝完成之后就可以選擇合適的 API 直接使用了。對(duì)于文章最開(kāi)始的例子，就可以借助 createTwoFilesPatch API 來(lái)對(duì)比兩個(gè)文件的差異，它的參數(shù)如下：

createTwoFilesPatch(oldFileName, newFileName, oldStr, newStr, oldHeader, newHeader, options)

oldFileName: 舊文件的文件名。
newFileName: 新文件的文件名。
oldStr: 原始字符串值
newStr: 新的字符串值
oldHeader: 可選，允許在舊文件的頭部添加額外的信息。
newHeader: 可選，用于在新文件的頭部添加額外的信息。
options: 一個(gè)包含選項(xiàng)的對(duì)象，可以用來(lái)自定義補(bǔ)丁的生成方式：
- context: 描述應(yīng)該包含多少行上下文。設(shè)置為 Number.MAX_SAFE_INTEGER 或 Infinity 可以包含整個(gè)文件內(nèi)容在一個(gè)塊（hunk）中。
- ignoreWhitespace: 與 diffLines 中的用法相同，用于忽略空白字符差異。默認(rèn)為 false。
- stripTrailingCr: 與 diffLines 中的用法相同，用于在執(zhí)行差異比較之前去除所有尾隨的回車(chē)符（\r）。這有助于在比較 UNIX 和 Windows 文本文件時(shí)得到有用的差異結(jié)果。默認(rèn)為 false。

代碼如下：

import * as Diff from 'diff';

const oldFile = `{
  "projectName": "ExampleProject",
  "version": "1.0.0",
  "author": "John Doe",
  "dependencies": {
    "libraryA": "^1.2.3",
    "libraryB": "^3.4.5"
  },
  "devDependencies": {
    "toolX": "^0.9.8"
  },
  "scripts": {
    "start": "node index.js"
  }
}`; 

const newFile = `{
  "projectName": "ExampleProject",
  "version": "1.0.1",
  "author": "Jane Doe",
  "dependencies": {
    "libraryA": "^1.2.3",
    "libraryC": "^7.8.9"
  },
  "devDependencies": {
    "toolX": "^0.9.8",
    "toolY": "^2.3.4"
  },
  "scripts": {
    "start": "node app.js",
    "test": "npm test"
  }
}`;

const diff = Diff.createTwoFilesPatch("舊文件", "新文件", oldFile, newFile);

這里的對(duì)比結(jié)果 diff 結(jié)果如下：

對(duì)比結(jié)果有點(diǎn)丑，下面會(huì)進(jìn)行優(yōu)化。

除了 jsdiff，還有一個(gè)基于 jsdiff 開(kāi)發(fā)的 React 庫(kù)：react-diff-viewer。它提供了一種簡(jiǎn)單易用的方式來(lái)展示兩個(gè)文本或?qū)ο笾g的差異，不僅可以對(duì)文本進(jìn)行對(duì)比，還可以輸出漂亮的差異對(duì)比結(jié)果。

Github：https://github.com/praneshr/react-diff-viewer

高亮顯示差異

如果使用 jsdiff 進(jìn)行對(duì)比，對(duì)比結(jié)果可能沒(méi)那么美觀，可以借助 diff2html 來(lái)美化。

diff2html 是一個(gè)用于將差異（diff）結(jié)果轉(zhuǎn)換成 HTML 格式的工具，它通常用于在網(wǎng)頁(yè)上展示文件或文本內(nèi)容之間的差異。這個(gè)庫(kù)提供了一種方便的方式來(lái)生成美觀的差異比較視圖，使得用戶(hù)可以輕松地查看和理解兩個(gè)版本之間的變化。

Github：https://github.com/rtfpessoa/diff2html

首先需要進(jìn)行安裝：

npm install diff2html --save

然后導(dǎo)入使用即可：

import * as Diff2Html from "diff2html";

const outputHtml = Diff2Html.html(diff, {
  inputFormat: "diff",
  showFiles: true,
  matching: "lines",
  highlight: true,
  outputFormat: "side-by-side",
});

這里的 diff 就是上一步中生成的 diff 結(jié)果。

美化后對(duì)比如下，更美觀了：