HTML文本对比工具｜diff高亮使用教程

本文详解如何用 diff-match-patch 在浏览器端快速实现安全、精准的 HTML 文本差异高亮——无需后端、不解析 DOM、纯字符串级对比，5 分钟即可搭建可交互页面；它内置语义优化与字符级标红/绿能力（如“lohi”），配合 DOMPurify 自动防御 XSS，远胜于需额外转换且易触发脚本执行的 diff 命令或 git diff；同时直击性能瓶颈（如大文件卡顿）与选型困惑（vs diff2html），给出输入截断、异步防阻塞、服务端预处理等实战方案，并提醒关键盲区：通用 diff 工具均不理解 HTML 注释、script 内容等特殊上下文，需手动剥离处理——真正帮你避开坑、落地快、用得稳。

直接用 diff-match-patch 浏览器端跑，5 分钟就能出可交互的 HTML 差异高亮页面——不需要后端、不传文件、不解析 DOM，只做字符串级对比，安全又够用。

为什么不用 diff 命令或 git diff 直接生成 HTML

因为它们输出的是统一 patch 格式（@@ -1,3 +1,4 @@ 开头那种），不是浏览器能直接渲染的 HTML；想转成带 / 的高亮页面，还得额外管道处理（比如接 pygmentize 或 diff2html-cli），本地没装对应工具就卡住。更重要的是：这些命令对 HTML 字符串本身不做转义，如果用户输入含 ，直接插入页面会执行。

用 diff-match-patch 实现行内高亮的关键三步

它不碰 DOM，只比字符串，所以必须自己处理 HTML 特殊字符转义和样式注入：

• 先对两个 HTML 字符串做 encodeURIComponent 编码（或用 DOMPurify.sanitize() 过滤），避免 XSS 和标签解析错乱
• 调用 dmp.diff_main() 得到操作数组，再用 dmp.diff_cleanupSemantic() 合并相邻的增删块（比如把“删 a、增 b”合成“替 a→b”）
• 用 dmp.diff_prettyHtml() 生成带 / 的 HTML，但默认样式极简，需手动加 CSS 控制颜色、背景、字体粗细

示例片段：

const dmp = new diff_match_patch();
const safeHtml1 = DOMPurify.sanitize(html1);
const safeHtml2 = DOMPurify.sanitize(html2);
const diffs = dmp.diff_main(safeHtml1, safeHtml2);
dmp.diff_cleanupSemantic(diffs);
const html = dmp.diff_prettyHtml(diffs);
document.getElementById('diff').innerHTML = html;

记得在 CSS 里定义：

ins { background: #d4edda; text-decoration: none; }
del { background: #f8d7da; text-decoration: line-through; }

对比大 HTML 文件时性能掉得快，怎么压住

dmp.diff_main() 在文本超 50KB 后响应明显变慢，不是算法问题，是 JS 单线程卡在长字符串遍历上：

• 前端限制输入长度，比如截断前 1000 行或 64KB，超出部分提示“内容过长，请精简后重试”
• 用 setTimeout 包一层，避免阻塞主线程导致页面冻结
• 不推荐用 Web Worker —— diff-match-patch 内部大量用正则和字符串方法，Worker 里无法直接复用原库实例，迁移成本高
• 真要处理整页 HTML（比如笔记系统版本对比），先用 lxml 或 html5lib 在服务端标准化格式（去空格、归一化属性顺序、补全自闭合标签），再传给前端比，效果更稳

diff2html 和 diff-match-patch 到底选哪个

看你要不要“语义理解”：

• diff2html 只负责把已有 unified diff（比如 diff -u 输出）渲染成带颜色的 HTML，它不计算差异，也不懂 HTML 结构——class="old" 变成 class="new"，它只会标整行，不会单独高亮 old 和 new
• diff-match-patch 自己算差异，支持字符级比对，能精准标出

  hellohi

  ，但前提是输入已清洗，否则

  \n hello\n

  和

  hello

  会被当成完全不同的字符串

最容易被忽略的一点：两者都不处理注释、