前言
最近客户提了个新需求,想在系统上直观的看到 用户本次修改的内容跟上次的区别 ,例如这两段话:
我是中华人民共和国合法居民,今天写一个测试文本,并没有其他的意思。
我是中国合法居民,今天打算写一个文本内容测试字符,没有别的意思!
经过查找,发现了一个开源库( 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>
diff.html
效果
后记
文本内容差异对比暂时先记录到这,后续再进行补充!