文本 Diff 对比
{{ n }}
{{ line.content }}
删除:{{ stats.deleted }} 行
未改变:{{ stats.unchanged }} 行
对比结果
{{ n }}
{{ line.content }}
新增:{{ stats.added }} 行
未改变:{{ stats.unchanged }} 行

工具简介

文本对比工具(Text Diff)可以帮助您快速对比两段文本或代码的差异。它会以高亮的形式显示出新增、删除和修改的行,并支持同步滚动,非常适合代码审查、版本对比或文档核对。

使用说明

  • 原始文本:在左侧面板粘贴您的基础内容。
  • 对比文本:在右侧面板粘贴修改后的内容。
  • 差异显示:系统将实时对比并显示差异:
    • 绿色高亮:右侧新增的行。
    • 红色高亮:左侧被删除或修改的行。
  • 统计信息:底部显示新增、删除、未改变的行数。

原理介绍

本工具采用基于行的差异对比算法。它将两段文本按换行符拆分为数组,通过逐行索引比对。为了提高性能,目前的实现专注于行级别的差异定位。通过 Vue.js 的双向绑定和计算属性,当用户输入任何字符时,都会触发重新对比,从而实现即时预览。

适用场景

  • 代码审查:对比代码修改前后的差异,快速定位变更内容。
  • 文档校对:检查文档修订版本之间的改动。
  • 配置文件对比:查看配置文件调整了哪些参数。
  • 学习笔记:对比自己修改的答案与标准答案的差异。