当前位置: 首页 > backend >正文

两段文本比对,高亮出差异部分

<div class="card" v-if="showFlag"><div class="info">*红色背景为已删除内容,绿色背景为新增内容</div><el-form-item label="与上季度比对:"><div class="compareCss" v-html="highlightedLastQuarteDiff"></div></el-form-item>
</div>

安装插件:diff

npm install diff
import diff from 'diff';
// 与上季度比对
const highlightedLastQuarteDiff = computed(() => {const oldText = state.jsonContent ?? ''; // 旧值(原内容)const newText = state.content ?? ''; // 新值(修改后内容)const differences = diff.diffChars(oldText, newText); // 字符级差异对比let result = '';differences.forEach(part => {// 被删除的内容(旧值有,新值无)if (part.removed) {result += `<span style="text-decoration: line-through; background:#fbe9eb;color: red;  text-decoration-color: #777;">${part.value}</span>`;}// 新增的内容(旧值无,新值有)else if (part.added) {result += `<span style="background-color: #a6f3a6; color: #777;">${part.value}</span>`;}// 未改动的内容else {result += part.value;}});return result;
});
http://www.xdnf.cn/news/1677.html

相关文章:

  • 【多智能体系统】特点解析与高效组织策略
  • Milvus(6):Collection 管理分区、管理别名
  • 深度解析 Kubernetes 配置管理:如何安全使用 ConfigMap 和 Secret
  • 字典与集合——测试界的黑话宝典与BUG追捕术
  • C语言编程--16.删除链表的倒数第n个节点
  • 触觉智能RK3506核心板,工业应用之RK3506 RT-Linux实时性测试
  • arm64适配系列文章-第九章-arm64环境上sentinel的部署
  • 【mysql】windows mysql命令
  • Verilog 语法 (一)
  • springboot在eclipse里面运行 run as 是Java Application还是 Maven
  • Java面试场景篇:分布式锁的实现与组件详解
  • MCP‌和LangGraph‌结合2
  • 基于Vue3 的 h5监听从左到右手滑返回上一页
  • 开源模型应用落地-语音合成-MegaTTS3-零样本克隆与多语言生成的突破
  • 从工作到娱乐:Codigger Desktop 让桌面环境更智能
  • c#-命名和书写规范
  • k8s基于角色的访问控制(RBAC)
  • GPT-4o最新图像生成完全指南:10大应用场景与提示词模板
  • opencv--图像变换
  • 悟空统计:小而美的网站流量统计工具,免费好用
  • 【金仓数据库征文】从云计算到区块链:金仓数据库的颠覆性创新之路
  • ThreadLocal
  • 医学图像(DICOM数据)读取及显示(横断面、冠状面、矢状面、3D显示)为什么用ITK+VTK,单独用ITK或者VTK能实一样功能吗?
  • centos离线安装ssh
  • C语言中封装JSON数组对象
  • 深度解析@SneakyThrows注解:原理、应用与最佳实践
  • 23种设计模式-行为型模式之策略模式(Java版本)
  • 基于 EFISH-SBC-RK3588 的无人机环境感知与数据采集方案
  • DPIN在AI+DePIN孟买峰会阐述全球GPU生态系统的战略愿景
  • MySQL:数据库设计