前端實現文本對比，并高亮顯示差異！

有沒有想過，常見的代碼差異對比是如何都實現的呢？其實這里面涉及到非常復雜的文本對比算法，本文就來看看如何通過現有工具庫 jsdiff + diff2html 實現文本對比，并高亮顯示差異！

文本對比

文本對比可以借助 jsdiff 來實現，jsdiff 是一個 JavaScript 庫，用于實現文本差異比較。這個庫提供了多種方法來計算和展示兩個文本之間的差異，可以用于多種文本差異比較的場景，比如版本控制、文檔比較、代碼編輯器中的變更高亮等。

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

jsdiff 是一個非常熱門的工具庫，其 npm 周下載量高達 4000 萬，很多知名前端工具庫都依賴它：

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

以下是 jsdiff 提供的 API：

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

在使用 jsdiff 時，首先需要通過以下命令來安裝：

 npm install diff --save

安裝完成之后就可以選擇合適的 API 直接使用了。對于文章最開始的例子，就可以借助 createTwoFilesPatch API 來對比兩個文件的差異，它的參數如下：

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

oldFileName: 舊文件的文件名。
newFileName: 新文件的文件名。
oldStr: 原始字符串值
newStr: 新的字符串值
oldHeader: 可選，允許在舊文件的頭部添加額外的信息。
newHeader: 可選，用于在新文件的頭部添加額外的信息。
options: 一個包含選項的對象，可以用來自定義補丁的生成方式：

context: 描述應該包含多少行上下文。設置為 Number.MAX_SAFE_INTEGER 或 Infinity 可以包含整個文件內容在一個塊（hunk）中。
ignoreWhitespace: 與 diffLines 中的用法相同，用于忽略空白字符差異。默認為 false。
stripTrailingCr: 與 diffLines 中的用法相同，用于在執行差異比較之前去除所有尾隨的回車符（\r）。這有助于在比較 UNIX 和 Windows 文本文件時得到有用的差異結果。默認為 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);

這里的對比結果 diff 結果如下：

對比結果有點丑，下面會進行優化。

除了 jsdiff，還有一個基于 jsdiff 開發的 React 庫：react-diff-viewer。它提供了一種簡單易用的方式來展示兩個文本或對象之間的差異，不僅可以對文本進行對比，還可以輸出漂亮的差異對比結果。

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

高亮顯示差異

如果使用 jsdiff 進行對比，對比結果可能沒那么美觀，可以借助 diff2html 來美化。

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

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

首先需要進行安裝：

 npm install diff2html --save

然后導入使用即可：

 import * as Diff2Html from "diff2html";

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

這里的 diff 就是上一步中生成的 diff 結果。

美化后對比如下，更美觀了：

更多配置可以在其文檔中進行探索。

作者:CUGGZ

來源-微信公眾號:前端充電寶

出處:https://mp.weixin.qq.com/s/rqJj4Plq-Rj1y6McMfF4gw

到對比兩個文件的差異，對于我們程序員來說，可以說是天天碰到。我們經常需要對比兩份代碼是否不同。但今天給大家推薦的是，一個對比兩份Html代碼最終效果差異的項目。

項目簡介

一個基于.Net 4.5開發的對比Html文件、片段效果差異的項目。兩份Html效果不一樣的地方會通過顏色、刪除線、背景色分別標記出來。

該項目使用場景一般是針對一些文章排版、錯別字顯示等情況，項目比較簡單，感興趣的可以了解下。

技術架構

1、平臺：基于.Net Framework 4.5、netstandard2.0開發

2、開發工具：Visual Studio 2017

項目結構

使用方法

對比Html片段

var oldText=@"<p><i>This is</i> some sample text to <strong>demonstrate</strong> the capability of the <strong>HTML diff tool</strong>.</p>
<p>It is based on the <b>Ruby</b> implementation found <a href='http://github.com/myobie/htmldiff'>here</a>. Note how the link has no tooltip</p>
<p>What about a number change: 123456?</p>
<table cellpadding='0' cellspacing='0'>
<tr><td>Some sample text</td><td>Some sample value</td></tr>
<tr><td>Data 1 (this row will be removed)</td><td>Data 2</td></tr>
</table>
                    Here is a number 2 32
<br><br>
                    This date: 1 Jan 2016 is about to change (note how it is treated as a block change!)";


var newText=@"<p>This is some sample <strong>text to</strong> demonstrate the awesome capabilities of the <strong>HTML <u>diff</u> tool</strong>.</p><br/><br/>Extra spacing here that was not here before.
<p>It is <i>based</i> on the Ruby implementation found <a title='Cool tooltip' href='http://github.com/myobie/htmldiff'>here</a>. Note how the link has a tooltip now and the HTML diff algorithm has preserved formatting.</p>
<p>What about a number change: 123356?</p>
<table cellpadding='0' cellspacing='0'>
<tr><td>Some sample <strong>bold text</strong></td><td>Some sample value</td></tr>
</table>
                    Here is a number 2 <sup>32</sup>
<br><br>
                    This date: 22 Feb 2017 is about to change (note how it is treated as a block change!)";


var diffHelper=new HtmlDiff.HtmlDiff(oldText, newText);
litOldText.Text=oldText;
litNewText.Text=newText;


// Lets add a block expression to group blocks we care about (such as dates)
diffHelper.AddBlockExpression(new Regex(@"[\d]{1,2}[\s]*(Jan|Feb)[\s]*[\d]{4}", RegexOptions.IgnoreCase));


litDiffText.Text=diffHelper.Build();

效果

通過效果圖，我們可以看出：

1、不一樣的地方，通過橙色背景色標記；

2、增加的地方，通過綠色背景色標記；

3、刪除的地方，通過粉色背景色+刪除線標記。

自定義對比效果

標記效果，也可以自定義，只需在Css文件修改樣式

/* ***************************************
** Diff related styles
*****************************************/


ins {
background-color: #cfc;
text-decoration:inherit;


}


del {
color: #999;
background-color:#FEC8C8;
}


ins.mod {
background-color: #FFE1AC;
}