文本Diff对比器

文本 Diff 对比器

项目简介

文本 Diff 对比器是一款零依赖的纯前端文本差异查看工具，把「原文 A」与「新文 B」逐行对比，红色高亮被删除的行、绿色高亮新增的行，让代码改动、配置变更、文章修订的差异一目了然。对比引擎采用行级最长公共子序列（LCS）算法，保证得到增删行数最少的差异结果。

整个应用由单个 HTML 文件承载，零依赖、零后端，打开即用。并排视图两侧行号严格对齐，差异块内删除行在前、新增行在后，与 Git 的差异展示习惯一致。

核心功能

• 行级差异高亮：左右并排展示，红色为「仅存在于原文」的删除行，绿色为「仅存在于新文」的新增行，灰色为相同行，两侧行号一一对齐。

• LCS 最少差异：动态规划求最长公共子序列后回溯，保证任何两段文本的增删行数最少；差异块内稳定排序（删除行在前、新增行在后）。

• 统计徽标：结果区实时显示「相同 / +新增 / -删除」行数，一眼看出改动规模。

• 行号标注：每个 diff 事件行标注其在原文（A 列）或新文（B 列）中的原始行号，便于定位到源文件。

• 输入便捷：原文/新文双栏文本域，行数实时计数；支持 A/B 一键交换、填入示例、一键清空。

• 大文本防护：单侧最多 1500 行、两侧行数乘积不超过 350 万，超限就地提示先拆分输入，避免页面卡死。

• 安全转义：所有文本经 HTML 转义后渲染，粘贴任意代码或符号不会破坏页面结构。

技术架构

应用采用「输入解析层 → LCS 引擎 → 事件排序 → 并排渲染层」的分层结构，全部运行在浏览器端，无后端依赖。

• 输入解析层：读取两侧文本域，统一 \r\n/\r 为 \n，再按行切分为数组（空文本得空数组、尾部空行剔除），两侧行数实时统计。

• LCS 引擎：对 A、B 两行数组做动态规划——以展平 Int32Array 存储 (n+1)×(m+1) 的 LCS 长度表，内存紧凑；随后从表尾回溯，same（两行相等）、del（A 侧独有）、add（B 侧独有）三种事件依次入栈后反转。

• 事件排序：把相邻的差异事件划分成块（以 same 行为边界），每个差异块内按「删除行在前、新增行在后」稳定重排，与 Git 展示风格一致。

• 并排渲染层：将事件序列渲染为双列网格——same 两列都显示并标注各自行号；del 仅左列显示红色删除行；add 仅右列显示绿色新增行；空行以占位符保持网格对齐，差异行高亮只在行内文本背景上体现。

核心逻辑说明

文本切行：splitLines(t) 归一化换行符后按 \n 切分，行首尾均不额外裁剪空白，保证与编辑器所见一致。

LCS 动态规划：diffLines(A, B) 构建长度表 L[i][j]：A[i-1] === B[j-1] 时 L[i][j] = L[i-1][j-1] + 1，否则取 max(L[i-1][j], L[i][j-1])。回溯时相等行记为 same，L[i-1][j] >= L[i][j-1] 记为 del（A 行不匹配），否则记为 add（B 行不匹配），扫尾后反转即得从前往后的差异事件序列。

差异块排序：orderEvents(events) 遍历事件，遇 same 直接输出；连续非 same 段先收集再按 del 优先重排输出，保证同一改动块内「先显示被删除的内容、再显示新增的内容」。

边界行为：两文本完全一致 → 全部 same、增删统计为 0；一侧为空 → 另一侧全量记为新增或删除；空文本对空文本 → 显示「无可对比内容」空态。

技术栈

使用方式

直接用浏览器打开 index.html 即可使用。左侧粘贴原始文本、右侧粘贴修改后的文本，点击「对比 Diff」即可看到逐行差异；「⇄ 交换 A/B」可互换两侧，「填入示例」提供一份代码改动的演示数据。

亮点与价值

• 零依赖、开箱即用：单个 HTML 文件承载全部能力，部署只需一个静态服务器。

• 算法可靠：LCS 动态规划保证增删差异最少，结果经 11 组差异场景向量验证（相同、删行、替换、头尾增行、空侧、多行移动等）。

• 展示专业：行号对齐 + 差异块内 del 在前 add 在后，风格贴近 Git diff，代码审查与文案修订都适用。

• 防护完善：超长输入安全拦截、文本 HTML 转义、500 行同文对比流畅完成，零 JS 错误。