1<?php class=class="string">"keyword">header(class="string">'Content-Type: text/html; charset=utf-class="number">8'); ?>
2<!DOCTYPE html><class="tag">html lang="zh-CN"><class="tag">head><class="tag">meta charset="UTF-class="number">8"><class="tag">meta name="viewport" content="width=device-width,initial-scale=class="number">1.0">
3<class="tag">title>文字对比 - η空间</class="tag">title>
4<class="tag">meta name="description" content="在线文本差异对比工具，自动标出两段文字的不同。纯浏览器本地处理。">
5<class="tag">link rel="stylesheet" href="/tools/share.css"><class="tag">link rel="stylesheet" href="/assets/pet-cat.css">
6<class="tag">style>
7*{margin:class="number">0;padding:class="number">0;box-sizing:border-box}
8body{font-family:class="string">'Outfit',-apple-system,sans-serif;background:class=class="string">"keyword">class=class="string">"comment">#0C0C0C;color:#F7F5F0;min-height:100vh}
9.container{max-width:700px;margin:class="number">0 auto;padding:40px 16px}
10h1{text-align:center;font-size:24px;margin-bottom:8px}
11h1 .a{color:class=class="string">"keyword">class=class="string">"comment">#FF6B35}
12.desc{text-align:center;color:class=class="string">"keyword">class=class="string">"comment">#class="number">888;font-size:13px;margin-bottom:24px}
13.editors{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:16px}
14.editor-box{background:class=class="string">"keyword">class=class="string">"comment">#class="number">161616;border:1px solid #class="number">222;border-radius:12px;padding:12px}
15.editor-box label{font-size:12px;color:class=class="string">"keyword">class=class="string">"comment">#class="number">888;display:block;margin-bottom:6px}
16.editor-box textarea{width:class="number">100%;height:150px;background:class=class="string">"keyword">class=class="string">"comment">#0C0C0C;border:1px solid #class="number">333;border-radius:8px;color:#ccc;padding:10px;font-size:13px;font-family:class="string">'JetBrains Mono',monospace;resize:vertical}
17.editor-box textarea:focus{outline:none;border-color:class=class="string">"keyword">class=class="string">"comment">#FF6B35}
18.btn{display:block;width:200px;margin:class="number">0 auto 16px;padding:10px;background:class=class="string">"keyword">class=class="string">"comment">#FF6B35;border:none;border-radius:10px;color:#fff;font-size:14px;font-weight:class="number">600;cursor:pointer;transition:all .3s}
19.btn:hover{background:class=class="string">"keyword">class=class="string">"comment">#e85a2a}
20.result-panel{background:class=class="string">"keyword">class=class="string">"comment">#class="number">161616;border:1px solid #class="number">222;border-radius:12px;padding:16px;min-height:100px;font-family:class="string">'JetBrains Mono',monospace;font-size:13px;line-height:class="number">1.8;white-space:pre-wrap;word-class=class="string">"keyword">break:class=class="string">"keyword">break-all}
21.result-panel .same{color:class=class="string">"keyword">class=class="string">"comment">#class="number">888}
22.result-panel .add{color:class=class="string">"keyword">class=class="string">"comment">#4ade80;background:rgba(class="number">74,class="number">222,class="number">128,class="number">0.1);border-radius:2px}
23.result-panel .del{color:class=class="string">"keyword">class=class="string">"comment">#ef4444;background:rgba(class="number">239,class="number">68,class="number">68,class="number">0.1);border-radius:2px;text-decoration:line-through}
24.result-panel .chg{color:class=class="string">"keyword">class=class="string">"comment">#facc15;background:rgba(class="number">250,class="number">204,class="number">21,class="number">0.1);border-radius:2px}
25.stats{display:flex;gap:16px;justify-content:center;margin-top:12px;font-size:12px;color:class=class="string">"keyword">class=class="string">"comment">#class="number">888}
26.stats span{display:flex;align-items:center;gap:4px}
27.stats .num{font-weight:class="number">600}
28.stats .num.green{color:class=class="string">"keyword">class=class="string">"comment">#4ade80}
29.stats .num.red{color:class=class="string">"keyword">class=class="string">"comment">#ef4444}
30</class="tag">style></class="tag">head><class="tag">body>
31<class="tag">div class=class="string">"keyword">class="container">
32<class="tag">h1><class="tag">span class=class="string">"keyword">class="a">≠</class="tag">span> 文字对比</class="tag">h1>
33<class="tag">p style="font-size:12px;color:class=class="string">"keyword">class=class="string">"comment">#class="number">555;margin-bottom:10px;text-align:center">≠ 左边贴旧版 · 右边贴新版 · 绿色=新增 红色=删除</class="tag">p>
34<class="tag">p class=class="string">"keyword">class="desc">粘贴两段文字，自动标出差异</class="tag">p>
35<class="tag">div class=class="string">"keyword">class="editors">
36<class="tag">div class=class="string">"keyword">class="editor-box"><class="tag">label>原文（旧）</class="tag">label><class="tag">textarea id="textA" placeholder="粘贴旧版本..."></class="tag">textarea></class="tag">div>
37<class="tag">div class=class="string">"keyword">class="editor-box"><class="tag">label>新文（新）</class="tag">label><class="tag">textarea id="textB" placeholder="粘贴新版本...">这是另一段文字，有些不一样的地方</class="tag">textarea></class="tag">div>
38</class="tag">div>
39<class="tag">button class=class="string">"keyword">class="btn" onclick="doDiff()">🔍 对比差异</class="tag">button>
40<class="tag">div class=class="string">"keyword">class="result-panel" id="result">点击"对比差异"查看结果</class="tag">div>
41<class="tag">div class=class="string">"keyword">class="stats" id="stats"></class="tag">div>
42</class="tag">div>
43<class="tag">script src="/tools/share.js"></class="tag">script><class="tag">script src="/assets/pet-cat.js"></class="tag">script>
44<class="tag">script>
45class=class="string">"keyword">function doDiff(){
46 class=class="string">"keyword">var a=document.class="func">getElementById(class="string">'textA').value;
47 class=class="string">"keyword">var b=document.class="func">getElementById(class="string">'textB').value;
48 class=class="string">"keyword">if(!a||!b){document.class="func">getElementById(class="string">'result').textContent=class="string">'请在两栏中都输入文字';class=class="string">"keyword">return;}
49 class=class="string">"keyword">var wordsA=a.split(class="string">''),wordsB=b.split(class="string">'');
50 class=class="string">"keyword">var LCS=buildLCS(wordsA,wordsB);
51 class=class="string">"keyword">var html=class="string">'',i=class="number">0,j=class="number">0,k=class="number">0,add=class="number">0,del=class="number">0;
52 class=class="string">"keyword">while(i<class="tag">wordsA.length||j<class="tag">wordsB.length){
53 class=class="string">"keyword">if(k<class="tag">LCS.length&&i<class="tag">wordsA.length&&j<class="tag">wordsB.length&&wordsA[i]===LCS[k]&&wordsB[j]===LCS[k]){
54 html+=esc(wordsA[i]);i++;j++;k++;
55 }class=class="string">"keyword">else class=class="string">"keyword">if(j<class="tag">wordsB.length&&(k>=LCS.length||wordsB[j]!==LCS[k])){
56 html+=class="string">'<class="tag">span class="keyword">class="add">'+esc(wordsB[j])+class="string">'</class="tag">span>';j++;add++;
57 }class=class="string">"keyword">else class=class="string">"keyword">if(i<class="tag">wordsA.length&&(k>=LCS.length||wordsA[i]!==LCS[k])){
58 html+=class="string">'<class="tag">span class="keyword">class="del">'+esc(wordsA[i])+class="string">'</class="tag">span>';i++;del++;
59 }class=class="string">"keyword">else class=class="string">"keyword">break;
60 }
61 document.class="func">getElementById(class="string">'result').innerHTML=html||class="string">'完全相同！';
62 document.class="func">getElementById(class="string">'stats').innerHTML=class="string">'<class="tag">span>新增<class="tag">span class="keyword">class="num green">'+add+class="string">'</class="tag">span>处</class="tag">span><class="tag">span>删除<class="tag">span class="keyword">class="num red">'+del+class="string">'</class="tag">span>处</class="tag">span>';
63}
64class=class="string">"keyword">function buildLCS(a,b){
65 class=class="string">"keyword">var m=a.length,n=b.length;
66 class=class="string">"keyword">var dp=class="func">Array(m+class="number">1).fill().map(class=class="string">"keyword">function(){class=class="string">"keyword">return class="func">Array(n+class="number">1).fill(class="number">0)});
67 class=class="string">"keyword">for(class=class="string">"keyword">var i=class="number">1;i<=m;i++)class=class="string">"keyword">for(class=class="string">"keyword">var j=class="number">1;j<=n;j++)
68 dp[i][j]=a[i-class="number">1]===b[j-class="number">1]?dp[i-class="number">1][j-class="number">1]+class="number">1:Math.max(dp[i-class="number">1][j],dp[i][j-class="number">1]);
69 class=class="string">"keyword">var res=[],i=m,j=n;
70 class=class="string">"keyword">while(i>class="number">0&&j>class="number">0){
71 class=class="string">"keyword">if(a[i-class="number">1]===b[j-class="number">1]){res.unshift(a[i-class="number">1]);i--;j--;}
72 class=class="string">"keyword">else class=class="string">"keyword">if(dp[i-class="number">1][j]>dp[i][j-class="number">1])i--;class=class="string">"keyword">else j--;
73 }
74 class=class="string">"keyword">return res;
75}
76class=class="string">"keyword">function esc(s){class=class="string">"keyword">return s.replace(/&/g,class="string">'&').replace(/</class="tag">g,class="string">'<').replace(/>/g,class="string">'>')}
77</class="tag">script><class="tag">div style="text-align:center;padding-top:10px;font-size:12px;color:class=class="string">"keyword">class=class="string">"comment">#class="number">555"><class="tag">a href="source-viewer.php?file=text-diff.php" style="color:#FF6B35;text-decoration:none;">📖 查看源码</class="tag">a> · 编程小白，AI生成，若体验不佳请多包涵 🙏</class="tag">div>
78</class="tag">body></class="tag">html>
79