功能需求：痕迹对比，就是当前文本和历史修改过的文本有什么区别？把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;
}
运行vue函数提示将“vue”项识别为 cmdlet、函数、脚本文件或可运行程序的名称解决方法
上面是“vuejs前端文本对比不同痕迹”的全面内容，想了解更多关于 vuejs 内容，请继续关注web建站教程。
当前网址：https://ipkd.cn/webs_2188.html
workflows工作流
文生图工作流：一幅海底睡莲，碧海蓝天comfyui工
一座生动的点彩主义灯塔ComfyUI工作流
一只可爱的飞鸟ComfyUI工作流
树上挂着一只快乐香蕉ComfyUI工作流一
树上挂着一只快乐的小樱桃
森林里有一个皮肤像抛光黑曜石的生物
一个穿过泥泞雷区的士兵ComfyUI工作流
一只在星系中漂浮宇宙生物ComfyUI工作流
猜你喜欢
javascript如何利用draggable实现一个拖拽效果
jquery做一个漂亮挂墙动态时钟
css3画弹珠，可以滚动！
纯css3绘制的小鸟
3d空间行走效果
iframe开发admin后台
js导出excel插件（兼容mac电脑Numbers表格）
利用canvas画几个好玩的星云物种声明：本站提供的所有资源部分来自互联网，如果有侵犯您的版权或其他权益，请发送到邮箱：admin@ipkd.cn，我们会在看到邮件的第一时间内为您处理！
