文本对比器：两段代码并排高亮不同行，改了什么漏了什么一眼定位

左右各贴一段文本或代码，点一下「对比」，新增、删除、修改的行和字符用不同颜色并排标出来；还能切到字符级看同一行里到底改了哪几个字。改配置文件、改代码、改合同文案时，把旧版和新版各贴一遍，差异一目了然。先看成品，再讲这次怎么用华为云 CodeArts 码道 WebUI 一段话把它做出来、部署上线。

这个工具做什么

它把「两段文本到底差在哪」这件事做成了并排可视化的对比面板：

• 行级对比：左右并排，删除 / 新增 / 相同行用不同背景色区分，带行号和连通线。
• 字符级对比：选定某一行，能看到行内到底改了哪几个字符，用小色块高亮。
• 对比选项：可选「忽略大小写」「忽略行首尾空格」，让无关差异不干扰结果。
• 一键操作：交换左右、清空、复制差异摘要、载入示例。
• 统计面板：新增 / 删除 / 修改行数一目了然。

码道开通（免费体验版）

开始之前，先免费开通码道体验版。不需要装任何软件，浏览器就能用：

https://developer.huaweicloud.com/codeartsco.html?source=dmzntgwsf&sourcead=dmzntgwwbwz

开通后有三种使用方式：WebUI（浏览器对话）、TUI（终端命令行）和桌面 IDE（IDE 插件）。本文用 WebUI 版演示。

进入 AI 开发者空间

1. 浏览器打开 https://devstation.developer.huaweicloud.com/aidevspace?utm_source=opcsfsq&utm_medium=wbwz
2. 弹窗「请选择要进入的版本」→ 点击 体验版
3. 首次使用会跳到华为云登录页，扫码登录一次，后续浏览器会话复用
4. 弹窗「临时凭据自动配置」→ 点击 同意，沙箱自动创建

进入 AI 开发者空间主界面后，先等左侧菜单加载出来，再找到 CodeArts，点击它右侧的浏览器图标，打开码道 WebUI 对话窗口：

打开后码道 WebUI 会先和你打招呼，下方就是需求输入框：

小贴士：体验版沙箱 3 小时后自动重置，生成完记得把 index.html 下载保存。

任务描述

在码道 WebUI 输入框粘贴以下需求，回车发送：

开发一个「文本对比器」网页应用：左右两个文本框分别粘贴两段文本或代码，点击对比即可并排高亮显示不同的行和字符（新增/删除/修改分别用不同颜色）；支持一键交换左右内容、清空、复制差异结果；界面简洁美观，单个网页打开即用。完成后用部署功能部署成可访问的网页应用，并告诉我访问地址。

这轮码道具体做了什么

不是复述通用 AI 能力，而是它在这篇项目里的实际动作：

• 先探测环境，发现 PYTHONHOME 污染的 python3 用不了，用 env -u PYTHONHOME -u PYTHONPATH 清理后找到空闲端口 3005。
• 创建 /workspace/text-comparator，写出单文件 index.html（约 410 行），把行级、字符级 diff 和渲染全部内联。
• 用 python3 -m http.server 3005 后台起服务并验证，最后给出内部访问地址。

代码亮点

以下是 index.html 里值得关注的设计思路和实现细节。

1. 行级差异：动态规划求最长公共子序列

行级 diff 用经典 LCS 动态规划，先把两段按行切分，再回退拼接出 eq / del / ins 操作序列：

function diffLines(a, b) {
  var n = a.length, m = b.length;
  var dp = new Array(n + 1);
  for (var i = 0; i <= n; i++) dp[i] = new Int32Array(m + 1);
  for (i = 1; i <= n; i++) {
    for (var j = 1; j <= m; j++) {
      if (a[i - 1] === b[j - 1]) dp[i][j] = dp[i - 1][j - 1] + 1;
      else dp[i][j] = dp[i - 1][j] >= dp[i][j - 1] ? dp[i - 1][j] : dp[i][j - 1];
    }
  }
  // 从右下角回退，生成 eq / del / ins 操作
}

2. 字符级差异：同一套算法换粒度再跑一遍

字符级 diff 把每个字符当成一个元素（用 Array.from 正确处理中文等多字节字符），再做一遍 LCS；为避免大文本卡顿，超出阈值直接整段标为删除 + 新增：

if (s1.length * s2.length > 200000) {
  var toks = [];
  if (s1.length) toks.push({ t: "del", text: s1 });
  if (s2.length) toks.push({ t: "ins", text: s2 });
  return toks;
}
var a = Array.from(s1), b = Array.from(s2);

3. 忽略大小写 / 行首尾空格：比较前先归一化

选项生效在比较之前：先把每行按需去掉首尾空格、转小写，归一化后的结果才进入 diff，原始文本仍原样显示：

function normalizeLine(line, ignoreCase, trim) {
  var v = line;
  if (trim) v = v.replace(/^\s+|\s+$/g, "");
  if (ignoreCase) v = v.toLowerCase();
  return v;
}

4. 结果渲染：行号 + 高亮 + 连通线

对比结果不是简单贴两个 div，而是渲染成带左右行号、删除/新增/相同底色，并用 buildDiffText 把差异摘要拼成可直接复制的文字。

直接下载试玩

本次生成的项目就是单文件 index.html，没有第三方依赖，把文件保存到本地后双击用浏览器打开即可运行。源码同步到公开 Demo Park 仓库：

• Demo Park 仓库：https://atomgit.com/deli007/demo_park
• 本案例目录：https://atomgit.com/deli007/demo_park/tree/main/codearts-text-diff

总结

文本对比器把「两段文本差在哪」做成了并排可视化：行级和字符级各跑一遍 LCS 动态规划，忽略大小写和首尾空格在比较前用归一化函数处理，渲染层再拼行号和高亮。整个工具零依赖，纯前端完成。后续还可以加「逐词 diff」「忽略空白行」「导出 HTML 补丁视图」等选项。

如果还没用过码道，可以免费开通体验版：https://developer.huaweicloud.com/codeartsco.html?source=dmzntgwsf&sourcead=dmzntgwwbwz