前端實現(xiàn)文本對比，并高亮顯示差異！
你有沒有想過，常見的代碼差異對比是如何都實現(xiàn)的呢？其實這里面涉及到非常復(fù)雜的文本對比算法，本文就來看看如何通過現(xiàn)有工具庫 jsdiff + diff2html 實現(xiàn)文本對比，并高亮顯示差異！
圖片
文本對比
文本對比可以借助 jsdiff 來實現(xiàn)，jsdiff 是一個 JavaScript 庫，用于實現(xiàn)文本差異比較。這個庫提供了多種方法來計算和展示兩個文本之間的差異，可以用于多種文本差異比較的場景，比如版本控制、文檔比較、代碼編輯器中的變更高亮等。
jsdiff 基于 Myers 在 1986 年提出的 "An O(ND) Difference Algorithm and its Variations" 算法實現(xiàn)。
jsdiff 是一個非常熱門的工具庫，其 npm 周下載量高達(dá) 4000 萬，很多知名前端工具庫都依賴它：
圖片
Github：https://github.com/kpdecker/jsdiff
以下是 jsdiff 提供的 API：
- diffChars - 對兩個文本進(jìn)行字符級別的差異比較。
- diffWords - 對兩個文本進(jìn)行單詞級別的差異比較，忽略空白字符。
- diffWordsWithSpace - 對兩個文本進(jìn)行單詞級別的差異比較，考慮空白字符作為分隔符。
- diffLines - 對兩個文本按行進(jìn)行差異比較。
- diffSentences - 對兩個文本按句子進(jìn)行差異比較。
- diffCss - 專門用于比較 CSS 代碼的差異。
- diffJson - 比較兩個 JSON 對象的差異，首先將它們序列化為格式化的 JSON 文本，然后逐行比較。
- diffArrays - 比較兩個數(shù)組，檢查數(shù)組元素的嚴(yán)格等同性。
- createTwoFilesPatch - 創(chuàng)建一個包含兩個文件差異的補(bǔ)丁。
- createPatch - 創(chuàng)建一個補(bǔ)丁，通常用于一個文件的前后變化。
- applyPatch - 應(yīng)用一個給定的補(bǔ)丁到源文本上。
- applyPatches - 應(yīng)用一個或多個補(bǔ)丁到相應(yīng)的文件內(nèi)容上。
- parsePatch - 解析一個補(bǔ)丁字符串為結(jié)構(gòu)化的數(shù)據(jù)。
- reversePatch - 反轉(zhuǎn)一個補(bǔ)丁，使得應(yīng)用此補(bǔ)丁會撤銷原始的更改。
- convertChangesToXML - 將差異對象轉(zhuǎn)換為 XML 格式。
- convertChangesToDMP - 將差異對象轉(zhuǎn)換為 Google 的 diff-match-patch 庫的格式。
在使用 jsdiff 時，首先需要通過以下命令來安裝：
npm install diff --save安裝完成之后就可以選擇合適的 API 直接使用了。對于文章最開始的例子，就可以借助 createTwoFilesPatch API 來對比兩個文件的差異，它的參數(shù)如下：
createTwoFilesPatch(oldFileName, newFileName, oldStr, newStr, oldHeader, newHeader, options)- oldFileName: 舊文件的文件名。
- newFileName: 新文件的文件名。
- oldStr: 原始字符串值
- newStr: 新的字符串值
- oldHeader: 可選，允許在舊文件的頭部添加額外的信息。
- newHeader: 可選，用于在新文件的頭部添加額外的信息。
- options: 一個包含選項的對象，可以用來自定義補(bǔ)丁的生成方式：
context: 描述應(yīng)該包含多少行上下文。設(shè)置為 Number.MAX_SAFE_INTEGER 或 Infinity 可以包含整個文件內(nèi)容在一個塊（hunk）中。
ignoreWhitespace: 與 diffLines 中的用法相同，用于忽略空白字符差異。默認(rèn)為 false。
stripTrailingCr: 與 diffLines 中的用法相同，用于在執(zhí)行差異比較之前去除所有尾隨的回車符（\r）。這有助于在比較 UNIX 和 Windows 文本文件時得到有用的差異結(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);這里的對比結(jié)果 diff 結(jié)果如下：
圖片
對比結(jié)果有點丑，下面會進(jìn)行優(yōu)化。
除了 jsdiff，還有一個基于 jsdiff 開發(fā)的 React 庫：react-diff-viewer。它提供了一種簡單易用的方式來展示兩個文本或?qū)ο笾g的差異，不僅可以對文本進(jìn)行對比，還可以輸出漂亮的差異對比結(jié)果。
圖片
Github：https://github.com/praneshr/react-diff-viewer
高亮顯示差異
如果使用 jsdiff 進(jìn)行對比，對比結(jié)果可能沒那么美觀，可以借助 diff2html 來美化。
diff2html 是一個用于將差異（diff）結(jié)果轉(zhuǎn)換成 HTML 格式的工具，它通常用于在網(wǎng)頁上展示文件或文本內(nèi)容之間的差異。這個庫提供了一種方便的方式來生成美觀的差異比較視圖，使得用戶可以輕松地查看和理解兩個版本之間的變化。
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é)果。
美化后對比如下，更美觀了：
圖片
更多配置可以在其文檔中進(jìn)行探索。
