前言
最近客戶提了個新需求，想在系統上直觀的看到使用者本次修改的內容跟上次的區別，例如這兩段話：
我是中華人民共和國合法居民，今天寫一個測試文字，並沒有其他的意思。
我是中國合法居民，今天打算寫一個文字內容測試字元，沒有別的意思！
經過查詢，發現了一個開源庫（google-diff-match-patch）正好符合我們的需求，這個庫目前支援7個語言，並且使用相同的API，每個版本都包含一套完整的單元測試。
文字記錄Java、JavaScript版本的簡單使用過程
程式碼編寫
本次測試專案是我們的jfinal-demo
首先先引入pom依賴
<!-- java版本 -->
<dependency>
<groupId>org.clojars.brenton</groupId>
<artifactId>google-diff-match-patch</artifactId>
<version>0.1</version>
</dependency>
<!-- webjars js版本 -->
<dependency>
<groupId>org.webjars</groupId>
<artifactId>google-diff-match-patch</artifactId>
<version>895a9512bb</version>
</dependency>
很簡潔，就一個類
diff_match_patch提供了挺多方法，且所有支援的語言版本的API保持一致，目前diff_main、diff_prettyHtml，這兩個方法已經能滿足我們的需求
首先寫一套controller、service層，提供一個一個對比介面、以及一個頁面跳轉，並新增一個diff頁面
jfinal使用webjar靜態資源，需要新增一個處理器，否則訪問不到資源
package cn.huanzi.qch.handler; import com.jfinal.handler.Handler; import com.jfinal.log.Log; import org.apache.commons.io.IOUtils; import javax.servlet.http.HttpServletRequest; import javax.servlet.http.HttpServletResponse; import java.io.IOException; import java.io.InputStream; import java.io.OutputStream; /** * webjar靜態資源處理 */ public class WebJarsHandler extends Handler { private final Log log = Log.getLog(this.getClass()); @Override public void handle(String target, HttpServletRequest request, HttpServletResponse response, boolean[] isHandled) { if (target.contains("/webjars/")) { //加字首，從ClassLoader找到資源 String path = target.replaceFirst("webjars", "META-INF/resources/webjars"); InputStream inputStream = this.getClass().getClassLoader().getResourceAsStream(path); OutputStream outputStream = null; try { if (inputStream != null) { outputStream = response.getOutputStream(); IOUtils.copy(inputStream, response.getOutputStream()); }else{ throw new IOException("inputStream is null"); } } catch (IOException e) { log.error("無法從webjar中找到該靜態資源 : " + path, e); } finally { IOUtils.closeQuietly(inputStream); IOUtils.closeQuietly(outputStream); } isHandled[0] = true; } else { this.next.handle(target, request, response, isHandled); } } }
然後在AppConfig中載入該處理器
/** * 配置處理器 */ public void configHandler(Handlers me) { me.add(new WebJarsHandler()); }
效果演示
簡單main測試
package cn.huanzi.qch.util; import name.fraser.neil.plaintext.diff_match_patch; import name.fraser.neil.plaintext.diff_match_patch.Diff; import java.util.LinkedList; public class DiffUtil { public static void main(String[] args) { diff_match_patch dmp = new diff_match_patch(); //上版本內容 String text1 = "我是中華人民共和國合法居民，今天寫一個測試文字，並沒有其他的意思。"; //本版本內容 String text2 = "我是中國合法居民，今天打算寫一個文字內容測試字元，沒有別的意思！"; //原始格式 LinkedList<Diff> linkedList = dmp.diff_main(text1, text2); System.out.println(linkedList); //轉成html格式 System.out.println(dmp.diff_prettyHtml(linkedList)); } }
效果
[Diff(EQUAL,"我是中"), Diff(DELETE,"華人民共和"), Diff(EQUAL,"國合法居民，今天"), Diff(INSERT,"打算"), Diff(EQUAL,"寫一個"), Diff(INSERT,"文字內容"), Diff(EQUAL,"測試"), Diff(DELETE,"文字"), Diff(INSERT,"字元"), Diff(EQUAL,"，"), Diff(DELETE,"並"), Diff(EQUAL,"沒有"), Diff(DELETE,"其他"), Diff(INSERT,"別"), Diff(EQUAL,"的意思"), Diff(DELETE,"。"), Diff(INSERT,"！")]
<SPAN TITLE="i=0">我是中</SPAN><DEL STYLE="background:#FFE6E6;" TITLE="i=3">華人民共和</DEL><SPAN TITLE="i=3">國合法居民，今天</SPAN><INS STYLE="background:#E6FFE6;" TITLE="i=11">打算</INS><SPAN TITLE="i=13">寫一個</SPAN><INS STYLE="background:#E6FFE6;" TITLE="i=16">文字內容</INS><SPAN TITLE="i=20">測試</SPAN><DEL STYLE="background:#FFE6E6;" TITLE="i=22">文字</DEL><INS STYLE="background:#E6FFE6;" TITLE="i=22">字元</INS><SPAN TITLE="i=24">，</SPAN><DEL STYLE="background:#FFE6E6;" TITLE="i=25">並</DEL><SPAN TITLE="i=25">沒有</SPAN><DEL STYLE="background:#FFE6E6;" TITLE="i=27">其他</DEL><INS STYLE="background:#E6FFE6;" TITLE="i=27">別</INS><SPAN TITLE="i=28">的意思</SPAN><DEL STYLE="background:#FFE6E6;" TITLE="i=31">。</DEL><INS STYLE="background:#E6FFE6;" TITLE="i=31">！</INS>
頁面效果測試
<!DOCTYPE html> <html lang="en-us"> <head> <meta charset="UTF-8"/> <title>文字內容對比</title> <style> .div-diff{ margin: 0 auto; width: 500px; } .div-diff p{ margin: 5px; } .div-diff h4{ padding: 5px 0; margin: 0; text-align: center; background: #f3f9ff; } .div-main{ width: 500px; } .div-text{ width: 240px; /*background: #eaeaea;*/ border: solid 1px #64b3e6; } .div-result{ width: 100%; /*background: #eaeaea;*/ border: solid 1px #64b3e6; } .div-text-p{ height: 200px; overflow-x: auto; } </style> </head> <body> <div class="div-diff"> <div class="div-main"> <div class="div-text" style="float: left;"> <h4>上版本內容</h4> <div class="div-text-p" > <p id="text1"></p> </div> </div> <div class="div-text" style="float: right;"> <h4>本版本內容</h4> <div class="div-text-p" > <p id="text2"></p> </div> </div> </div> <div class="div-main" style="position: fixed;top: 255px;"> <div class="div-result"> <h4>內容差異對比</h4> <div class="div-text-p" > <p id="result"></p> </div> </div> </div> </div> </body> <!-- jquery --> <script src="#(ctx)/assets/js/jquery-3.6.0.min.js" type="text/javascript"></script> <!-- webjar diff_match_patch --> <script src="#(ctx)/webjars/google-diff-match-patch/895a9512bb/diff_match_patch.js" type="text/javascript"></script> <script> //上版本內容 let text1 = "我是中華人民共和國合法居民，今天寫一個測試文字，並沒有其他的意思。"; //本版本內容 let text2 = "我是中國合法居民，今天打算寫一個文字內容測試字元，沒有別的意思！"; //指令碼測試 let flag = 0; //使用java版本庫，呼叫後臺處理 if(flag){ $.ajax({ type:"POST", url:"#(ctx)/diff/diffPrettyHtml", data:{ text1:text1, text2:text2, }, dataType:"JSON", contentType:"application/x-www-form-urlencoded", success:function(data){ console.log(data); $("#text1").html(text1); $("#text2").html(text2); $("#result").html(data.data); }, error:function(data){ console.error(data); } }) } //使用js版本庫，直接在前端處理 else{ let diffMatchPatch = new diff_match_patch(); let diffPrettyHtml = diffMatchPatch.diff_prettyHtml(diffMatchPatch.diff_main(text1,text2)); $("#text1").html(text1); $("#text2").html(text2); $("#result").html(diffPrettyHtml); } </script> </html>
效果
後記
文字內容差異對比暫時先記錄到這，後續再進行補充！
程式碼開源
程式碼已經開源、託管到我的GitHub、碼雲：