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

左右各贴一段文本或代码点一下「对比」新增、删除、修改的行和字符用不同颜色并排标出来还能切到字符级看同一行里到底改了哪几个字。改配置文件、改代码、改合同文案时把旧版和新版各贴一遍差异一目了然。先看成品再讲这次怎么用华为云 CodeArts 码道 WebUI 一段话把它做出来、部署上线。这个工具做什么它把「两段文本到底差在哪」这件事做成了并排可视化的对比面板行级对比左右并排删除 / 新增 / 相同行用不同背景色区分带行号和连通线。字符级对比选定某一行能看到行内到底改了哪几个字符用小色块高亮。对比选项可选「忽略大小写」「忽略行首尾空格」让无关差异不干扰结果。一键操作交换左右、清空、复制差异摘要、载入示例。统计面板新增 / 删除 / 修改行数一目了然。码道开通免费体验版开始之前先免费开通码道体验版。不需要装任何软件浏览器就能用https://developer.huaweicloud.com/codeartsco.html?sourcedmzntgwsfsourceaddmzntgwwbwz开通后有三种使用方式WebUI浏览器对话、TUI终端命令行和桌面 IDEIDE 插件。本文用 WebUI 版演示。进入 AI 开发者空间浏览器打开 https://devstation.developer.huaweicloud.com/aidevspace?utm_sourceopcsfsqutm_mediumwbwz弹窗「请选择要进入的版本」→ 点击体验版首次使用会跳到华为云登录页扫码登录一次后续浏览器会话复用弹窗「临时凭据自动配置」→ 点击同意沙箱自动创建进入 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操作序列functiondiffLines(a,b){varna.length,mb.length;vardpnewArray(n1);for(vari0;in;i)dp[i]newInt32Array(m1);for(i1;in;i){for(varj1;jm;j){if(a[i-1]b[j-1])dp[i][j]dp[i-1][j-1]1;elsedp[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.length200000){vartoks[];if(s1.length)toks.push({t:del,text:s1});if(s2.length)toks.push({t:ins,text:s2});returntoks;}varaArray.from(s1),bArray.from(s2);3. 忽略大小写 / 行首尾空格比较前先归一化选项生效在比较之前先把每行按需去掉首尾空格、转小写归一化后的结果才进入 diff原始文本仍原样显示functionnormalizeLine(line,ignoreCase,trim){varvline;if(trim)vv.replace(/^\s|\s$/g,);if(ignoreCase)vv.toLowerCase();returnv;}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?sourcedmzntgwsfsourceaddmzntgwwbwz