功能需求：痕迹对比，就是当前文本和历史修改过的文本有什么区别？把2边不同的文字用不同颜色标记出来！
1、template代码
<div class="dialog-mark-diff">
<el-card>
<h3>上次修改</h3>
<div class="compare-report-info" v-html="preReportInfo"></div>
</el-card>
<el-card>
<h3>选中记录</h3>
<div class="compare-report-info" v-html="nowReportInfo"></div>
</el-card>
</div>
2、main.js
import compareReportInfo from "@/utils/compareReportInfo.js";
global.compareReportInfo = compareReportInfo;
3、compareReportInfo.js
export default {
//判断preReportInfo
eq(op) {
if (!op) {
return op;
}
if (!op.preReportInfo_style) {
op.preReportInfo_style = "background:#00c0ef;color:#fff";
}
if (!op.preReportInfoLabel_style) {
op.preReportInfoLabel_style = "background:red;color:#fff";
}
var ps = {
v1_i: 0,
v1_new_value: "",
v2_i: 0,
v2_new_value: ""
};
while (
ps.v1_i < op.preReportInfo.length &&
ps.v2_i < op.preReportInfoLabel.length
) {
if (op.preReportInfo[ps.v1_i] == op.preReportInfoLabel[ps.v2_i]) {
ps.v1_new_value += op.preReportInfo[ps.v1_i]
.replace(/", ">");
ps.v2_new_value += op.preReportInfoLabel[ps.v2_i]
.replace(/", ">");
ps.v1_i += 1;
ps.v2_i += 1;
if (ps.v1_i >= op.preReportInfo.length) {
ps.v2_new_value +=
"" +
op.preReportInfoLabel
.substr(ps.v2_i)
.replace(/", ">") +
"";
break;
}
if (ps.v2_i >= op.preReportInfoLabel.length) {
ps.v1_new_value +=
"" +
op.preReportInfo
.substr(ps.v1_i)
.replace(/", ">") +
"";
break;
}
} else {
ps.v1_index = ps.v1_i + 1;
ps.v1_eq_length = 0;
ps.v1_eq_max = 0;
ps.v1_start = ps.v1_i + 1;
while (ps.v1_index < op.preReportInfo.length) {
if (
op.preReportInfo[ps.v1_index] ==
op.preReportInfoLabel[ps.v2_i + ps.v1_eq_length]
) {
ps.v1_eq_length += 1;
} else if (ps.v1_eq_length > 0) {
if (ps.v1_eq_max < ps.v1_eq_length) {
ps.v1_eq_max = ps.v1_eq_length;
ps.v1_start = ps.v1_index - ps.v1_eq_length;
}
ps.v1_eq_length = 0;
break; //只寻找最近的
}
ps.v1_index += 1;
}
if (ps.v1_eq_max < ps.v1_eq_length) {
ps.v1_eq_max = ps.v1_eq_length;
ps.v1_start = ps.v1_index - ps.v1_eq_length;
}
ps.v2_index = ps.v2_i + 1;
ps.v2_eq_length = 0;
ps.v2_eq_max = 0;
ps.v2_start = ps.v2_i + 1;
while (ps.v2_index < op.preReportInfoLabel.length) {
if (
op.preReportInfoLabel[ps.v2_index] ==
op.preReportInfo[ps.v1_i + ps.v2_eq_length]
) {
ps.v2_eq_length += 1;
} else if (ps.v2_eq_length > 0) {
if (ps.v2_eq_max < ps.v2_eq_length) {
ps.v2_eq_max = ps.v2_eq_length;
ps.v2_start = ps.v2_index - ps.v2_eq_length;
}
ps.v1_eq_length = 0;
break; //只寻找最近的
}
ps.v2_index += 1;
}
if (ps.v2_eq_max < ps.v2_eq_length) {
ps.v2_eq_max = ps.v2_eq_length;
ps.v2_start = ps.v2_index - ps.v2_eq_length;
}
if (ps.v1_eq_max < op.eq_min && ps.v1_start - ps.v1_i > op.eq_index) {
ps.v1_eq_max = 0;
}
if (ps.v2_eq_max < op.eq_min && ps.v2_start - ps.v2_i > op.eq_index) {
ps.v2_eq_max = 0;
}
if (ps.v1_eq_max == 0 && ps.v2_eq_max == 0) {
ps.v1_new_value +=
"" +
op.preReportInfo[ps.v1_i].replace(/", ">") +
"";
ps.v2_new_value +=
"" +
op.preReportInfoLabel[ps.v2_i]
.replace(/", ">") +
"";
ps.v1_i += 1;
ps.v2_i += 1;
if (ps.v1_i >= op.preReportInfo.length) {
ps.v2_new_value +=
"" +
op.preReportInfoLabel
.substr(ps.v2_i)
.replace(/", ">") +
"";
break;
}
if (ps.v2_i >= op.preReportInfoLabel.length) {
ps.v1_new_value +=
"" +
op.preReportInfo
.substr(ps.v1_i)
.replace(/", ">") +
"";
break;
}
} else if (ps.v1_eq_max > ps.v2_eq_max) {
ps.v1_new_value +=
"" +
op.preReportInfo
.substr(ps.v1_i, ps.v1_start - ps.v1_i)
.replace(/", ">") +
"";
ps.v1_i = ps.v1_start;
} else {
ps.v2_new_value +=
"" +
op.preReportInfoLabel
.substr(ps.v2_i, ps.v2_start - ps.v2_i)
.replace(/", ">") +
"";
ps.v2_i = ps.v2_start;
}
}
}
op.preReportInfo = ps.v1_new_value;
op.preReportInfoLabel = ps.v2_new_value;
return op;
},
//判断preReportInfo2
eq2(op) {
if (!op) {
return op;
}
if (!op.preReportInfo2_style) {
op.preReportInfo2_style = "background:#00c0ef;color:#fff";
}
if (!op.preReportInfoLabel2_style) {
op.preReportInfoLabel2_style = "background:red;color:#fff";
}
var ps = {
v1_i: 0,
v1_new_value: "",
v2_i: 0,
v2_new_value: ""
};
while (
ps.v1_i < op.preReportInfo2.length &&
ps.v2_i < op.preReportInfoLabel2.length
) {
if (op.preReportInfo2[ps.v1_i] == op.preReportInfoLabel2[ps.v2_i]) {
ps.v1_new_value += op.preReportInfo2[ps.v1_i]
.replace(/", ">");
ps.v2_new_value += op.preReportInfoLabel2[ps.v2_i]
.replace(/", ">");
ps.v1_i += 1;
ps.v2_i += 1;
if (ps.v1_i >= op.preReportInfo2.length) {
ps.v2_new_value +=
"" +
op.preReportInfoLabel2
.substr(ps.v2_i)
.replace(/", ">") +
"";
break;
}
if (ps.v2_i >= op.preReportInfoLabel2.length) {
ps.v1_new_value +=
"" +
op.preReportInfo2
.substr(ps.v1_i)
.replace(/", ">") +
"";
break;
}
} else {
ps.v1_index = ps.v1_i + 1;
ps.v1_eq_length = 0;
ps.v1_eq_max = 0;
ps.v1_start = ps.v1_i + 1;
while (ps.v1_index < op.preReportInfo2.length) {
if (
op.preReportInfo2[ps.v1_index] ==
op.preReportInfoLabel2[ps.v2_i + ps.v1_eq_length]
) {
ps.v1_eq_length += 1;
} else if (ps.v1_eq_length > 0) {
if (ps.v1_eq_max < ps.v1_eq_length) {
ps.v1_eq_max = ps.v1_eq_length;
ps.v1_start = ps.v1_index - ps.v1_eq_length;
}
ps.v1_eq_length = 0;
break; //只寻找最近的
}
ps.v1_index += 1;
}
if (ps.v1_eq_max < ps.v1_eq_length) {
ps.v1_eq_max = ps.v1_eq_length;
ps.v1_start = ps.v1_index - ps.v1_eq_length;
}
ps.v2_index = ps.v2_i + 1;
ps.v2_eq_length = 0;
ps.v2_eq_max = 0;
ps.v2_start = ps.v2_i + 1;
while (ps.v2_index < op.preReportInfoLabel2.length) {
if (
op.preReportInfoLabel2[ps.v2_index] ==
op.preReportInfo2[ps.v1_i + ps.v2_eq_length]
) {
ps.v2_eq_length += 1;
} else if (ps.v2_eq_length > 0) {
if (ps.v2_eq_max < ps.v2_eq_length) {
ps.v2_eq_max = ps.v2_eq_length;
ps.v2_start = ps.v2_index - ps.v2_eq_length;
}
ps.v1_eq_length = 0;
break; //只寻找最近的
}
ps.v2_index += 1;
}
if (ps.v2_eq_max < ps.v2_eq_length) {
ps.v2_eq_max = ps.v2_eq_length;
ps.v2_start = ps.v2_index - ps.v2_eq_length;
}
if (ps.v1_eq_max < op.eq_min && ps.v1_start - ps.v1_i > op.eq_index) {
ps.v1_eq_max = 0;
}
if (ps.v2_eq_max < op.eq_min && ps.v2_start - ps.v2_i > op.eq_index) {
ps.v2_eq_max = 0;
}
if (ps.v1_eq_max == 0 && ps.v2_eq_max == 0) {
ps.v1_new_value +=
"" +
op.preReportInfo2[ps.v1_i].replace(/", ">") +
"";
ps.v2_new_value +=
"" +
op.preReportInfoLabel2[ps.v2_i]
.replace(/", ">") +
"";
ps.v1_i += 1;
ps.v2_i += 1;
if (ps.v1_i >= op.preReportInfo2.length) {
ps.v2_new_value +=
"" +
op.preReportInfoLabel2
.substr(ps.v2_i)
.replace(/", ">") +
"";
break;
}
if (ps.v2_i >= op.preReportInfoLabel2.length) {
ps.v1_new_value +=
"" +
op.preReportInfo2
.substr(ps.v1_i)
.replace(/", ">") +
"";
break;
}
} else if (ps.v1_eq_max > ps.v2_eq_max) {
ps.v1_new_value +=
"" +
op.preReportInfo2
.substr(ps.v1_i, ps.v1_start - ps.v1_i)
.replace(/", ">") +
"";
ps.v1_i = ps.v1_start;
} else {
ps.v2_new_value +=
"" +
op.preReportInfoLabel2
.substr(ps.v2_i, ps.v2_start - ps.v2_i)
.replace(/", ">") +
"";
ps.v2_i = ps.v2_start;
}
}
}
op.preReportInfo2 = ps.v1_new_value;
op.preReportInfoLabel2 = ps.v2_new_value;
return op;
}
};
4、script代码
data() {
return {
preReportInfo: "",
preReportInfoLabel: "",
nowReportInfo: "",
nowReportInfoLabel: ""
}
}
//报告痕迹对比列表点击事件
openMarkTableDetails(row) {
var newsListData1 = [];
newsListData1.push({
currentDate: row.Ftime.replace(/T/g, " "),
nowReportInfo: row.Describle.replace(/null/g, " "),
});
var newsListData2 = [];
for (var i = 0; i < this.dialogTableData.length; i++) {
if (this.dialogTableData[i].tid == row.tid - 1) {
newsListData2.push({
prevDate: this.dialogTableData[i].Ftime.replace(/T/g, " "),
preReportInfo: this.dialogTableData[i].Describle.replace(
/null/g,
" "
)" "
)
});
}
}
if (newsListData2[0] == undefined) {
this.prevDate = "";
this.preReportInfoLabel = "无";
this.currentDate = newsListData1[0].currentDate;
this.nowReportInfoLabel = newsListData1[0].nowReportInfo;
} else {
this.prevDate = newsListData2[0].prevDate;
this.preReportInfoLabel = newsListData2[0].preReportInfo;
this.currentDate = newsListData1[0].currentDate;
this.nowReportInfoLabel = newsListData1[0].nowReportInfo;
}
let op = compareReportInfo.eq({
preReportInfo: this.preReportInfoLabel,
preReportInfoLabel: this.nowReportInfoLabel
});
this.preReportInfo = op.preReportInfo;
this.nowReportInfo = op.preReportInfoLabel;
let op1 = compareReportInfo.eq({
preReportInfo: this.preReportInfoLabel,
preReportInfoLabel: this.nowReportInfoLabel
});
this.preReportInfo = op1.preReportInfo;
this.nowReportInfo = op1.preReportInfoLabel;
}
沃梦达教程
本文标题为：vuejs前端文本对比不同痕迹
基础教程推荐
猜你喜欢
- 重写 ajax 实现 session 超时跳转到登录页面实例代码 2023-02-01
- el-dialog弹窗全局垂直居中设置 2024-12-09
- vue项目中Toast字体过小,没有边距的解决方案 2024-01-24
- 设置和读取cookie的javascript代码 2024-03-20
- 一文读懂微信小程序页面导航 2024-02-10
- 纯css实现的下拉导航栏附html结构及css样式 2023-12-23
- javascript中的注释使用与注意事项小结 2023-12-02
- input file样式修改以及图片预览删除功能详细概括（推荐） 2024-02-09
- vuejs实现点击按钮复制文本内容clipboard 2024-12-09
- JavaScript defineProperty如何实现属性劫持 2023-08-08
