文本内容差异对比

　前言

　　最近客户提了个新需求，想在系统上直观的看到用户本次修改的内容跟上次的区别，例如这两段话：

　　　　我是中华人民共和国合法居民，今天写一个测试文本，并没有其他的意思。

　　　　我是中国合法居民，今天打算写一个文本内容测试字符，没有别的意思！

　　经过查找，发现了一个开源库（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测试

　　页面效果测试

　　后记

　　代码开源