文本內容差異對比

　前言

　　最近客戶提了個新需求，想在系統上直觀的看到用戶本次修改的內容跟上次的區別，例如這兩段話：

　　　　我是中華人民共和國合法居民，今天寫一個測試文本，并沒有其他的意思。

　　　　我是中國合法居民，今天打算寫一個文本內容測試字符，沒有別的意思！

　　經過查找，發現了一個開源庫（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、碼云：

　　GitHub：https://github.com/huanzi-qch/jfinal-demo

　　碼云：https://gitee.com/huanzi-qch/jfinal-demo

版權聲明

作者：huanzi-qch

出處：https://www.cnblogs.com/huanzi-qch

若標題中有“轉載”字樣，則本文版權歸原作者所有。若無轉載字樣，本文版權歸作者所有，歡迎轉載，但未經作者同意必須保留此段聲明，且在文章頁面明顯位置給出原文鏈接，否則保留追究法律責任的權利.

本對比的工具有很多常用的有Beyond Compare、Notepad++插件比對等，這些工具比對已經很成熟而且很好用，但是我需要比對幾十個文件甚至幾百個，如果一個一個去比較差不多要浪費我一整天的時間。

結果一番折騰，總算找到了比較方便，展示結果也比較清晰的批量文本對比工具，就是在Beyond Compare的基礎上用腳本直接調用，下面展示一下我的成果。

有差異的比對結果

無差異的比對結果

批量比對，需要建立兩個比對的文件目錄，結構要一致，也可以根據自己需要去修改

文件1的目錄結構

文件2的目錄結構

生成的結果報告為html文件，可以直接在瀏覽器中查看

比對結果報告

最后附上Python編寫的文本比對腳本

# encoding:utf-8
import subprocess
from os import path,walk


def get_txt(input_txt_dir):
    '''獲取需要對比的txt文件'''
    txt_list=[]
    for root,dirs,files in walk(input_txt_dir):
        for file in files:
            if file.split('.')[-1]=='txt':
                txt_list.append(path.join(root,file))
    return txt_list

def file_compare(input_txt_dir_left,input_txt_dir_right):
    '''文件比對輸出html報告'''
    BeyondCompare_path=r"BeyondCompare.exe"
    hide_gui='/silent'
    base_script=r'@{}'.format(path.abspath('base_script.txt'))
    file_1=get_txt(input_txt_dir_left)
    file_2=get_txt(input_txt_dir_right)
    count=1

    for txt_left,txt_right in zip(file_1,file_2):
        html_report_path=path.abspath(f"output_html\{count}.html")
        print('文件比對：',txt_left,txt_right)
        cmd=f'{BeyondCompare_path} {hide_gui} {base_script} {txt_left} {txt_right} {html_report_path}'
        run=subprocess.Popen(cmd,stdout=subprocess.PIPE,shell=True)
        run.wait()
        count +=1


if __name__=='__main__':
    input_txt_dir_left=r"C:\Users\linxiaoqiang\Desktop\1"
    input_txt_dir_right=r"C:\Users\linxiaoqiang\Desktop\2"

    file_compare(input_txt_dir_left,input_txt_dir_right)

編碼不易，請多多關注，持續分享更多知識！

avaScript If...Else 語句

JS 比較
JS Switch

條件語句用于基于不同條件執行不同的動作。

條件語句

在您寫代碼時，經常會需要基于不同判斷執行不同的動作。

您可以在代碼中使用條件語句來實現這一點。

在 JavaScript 中，我們可使用如下條件語句：

使用 if 來規定要執行的代碼塊，如果指定條件為 true
使用 else 來規定要執行的代碼塊，如果相同的條件為 false
使用 else if 來規定要測試的新條件，如果第一個條件為 false
使用 switch 來規定多個被執行的備選代碼塊

if 語句

請使用 if 語句來規定假如條件為 true 時被執行的 JavaScript 代碼塊。

語法

if (條件) {
    如果條件為 true 時執行的代碼
}

注釋：if 使用小寫字母。大學字母（IF 或 If）會產生 JavaScript 錯誤。

實例

如果時間早于 18:00，則發出 "Good day" 的問候：

if (hour < 18) {
    greeting="Good day";
}

如果時間早于 18 點，則 greeting 的結果將是：

Good day

親自試一試

else 語句

請使用 else 語句來規定假如條件為 false 時的代碼塊。

if (條件) {
    條件為 true 時執行的代碼塊
} else { 
    條件為 false 時執行的代碼塊
}

實例

如果 hour 小于 18，創建 "Good day" 問候，否則 "Good evening"：

if (hour < 18) {
    greeting="Good day";
 } else {
    greeting="Good evening";
 }

greeting 的結果：

在線咨詢

上一篇：解決WANGEDITOR從WORD復制粘貼圖片，帶有
下一篇：「day-ui」 Alert 組件學習

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商

文本內容差異對比

前言

代碼編寫

效果演示

簡單main測試

頁面效果測試

后記

代碼開源

版權聲明

avaScript If...Else 語句

條件語句

if 語句

語法

實例

else 語句

實例

您的項目需求

　前言

　　代碼編寫

　　效果演示

　　簡單main測試

　　頁面效果測試

　　后記

　　代碼開源