vuejs前端文本对比不同痕迹

1415 ℃

功能需求：痕迹对比，就是当前文本和历史修改过的文本有什么区别？把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结合MVVM模型的实现方法

利用vue实现一个图片水平瀑布流效果

运行vue函数提示将“vue”项识别为 cmdlet、函数、脚本文件或可运行程序的名称解决方法

vue-roter路由配置的3种模式介绍

vue项目优化之防抖案例分析

标签： vue, 文本对比

上面是“vuejs前端文本对比不同痕迹”的全面内容，想了解更多关于 vuejs 内容，请继续关注web建站教程。

当前网址：https://m.ipkd.cn/webs_2188.html

声明：本站提供的所有资源部分来自互联网，如果有侵犯您的版权或其他权益，请发送到邮箱：admin@ipkd.cn，我们会在看到邮件的第一时间内为您处理！

详解织梦模板DEDE首页列表页AJAX无限加载瀑布流修
dedecms织梦文档arcrank和ismake两个字段的含义
织梦文章添加字段填栏目id，内容页调用字段里的
mysql如何修改字符集
不利用if-esle如何做判断
Copyright©2019-2024 前端入门建站教程 浙ICP备2021039069号-2