-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathtext-diff.html
More file actions
201 lines (187 loc) · 11.8 KB
/
Copy pathtext-diff.html
File metadata and controls
201 lines (187 loc) · 11.8 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
<!DOCTYPE html>
<html lang="en">
<head>
<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-5545263418745440" crossorigin="anonymous"></script>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Text Diff Checker — Compare Text Online</title>
<meta name="description" content="Our free text diff checker lets you compare two blocks of text and see exactly what changed. Whether you're reviewing document revisions, checking cod">
<meta name="robots" content="index, follow">
<link rel="canonical" href="https://textools.site/tools/text-diff.html">
<meta property="og:title" content="📋 Text Diff Checker">
<meta property="og:description" content="Our free text diff checker lets you compare two blocks of text and see exactly what changed. Whether you're reviewing do">
<meta property="og:url" content="https://textools.site/tools/text-diff.html">
<meta property="og:image" content="https://textools.site/og-tools.png">
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:image" content="https://textools.site/og-tools.png">
<style>
*{margin:0;padding:0;box-sizing:border-box}
body{font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;background:#0a0a14;color:#d0c8e0;min-height:100vh;line-height:1.6}
.container{max-width:800px;margin:0 auto;padding:24px 20px}
h1{font-size:26px;font-weight:900;background:linear-gradient(135deg,#e0c8ff,#7b68ee,#4a3aa0);-webkit-background-clip:text;-webkit-text-fill-color:transparent;letter-spacing:1px;margin-bottom:4px}
.sub{color:#7a6a9a;font-size:12px;margin-bottom:16px}
.trust-badge{display:inline-block;background:rgba(100,220,150,.08);border:1px solid rgba(100,220,150,.12);border-radius:6px;padding:3px 10px;font-size:11px;color:#64c896;margin-bottom:14px}
textarea{width:100%;height:280px;background:#0e0e1a;border:1px solid #1e1e3a;border-radius:10px;padding:14px;color:#d0c8e0;font-size:13px;font-family:'SF Mono','Fira Code',monospace;resize:vertical;outline:none;transition:border-color .2s}
textarea:focus{border-color:#7b68ee}
textarea[readonly]{color:#c4a0ff}
.stats{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:10px;margin:14px 0 8px}
.stat-card{background:linear-gradient(135deg,rgba(26,26,46,.93),rgba(16,16,30,.93));border:1px solid rgba(123,104,238,.12);border-radius:10px;padding:12px;text-align:center}
.stat-card .num{font-size:22px;font-weight:800;color:#e0c8ff}
.stat-card .label{font-size:11px;color:#7a6a9a;margin-top:2px}
.actions{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:6px}
.actions button{background:linear-gradient(135deg,#7b68ee,#5a4acd);color:#fff;border:none;padding:8px 18px;border-radius:8px;font-size:12px;font-weight:600;cursor:pointer;transition:all .2s}
.actions button:hover{background:linear-gradient(135deg,#8a78ff,#6a5add);transform:translateY(-1px)}
.actions button.alt{background:transparent;border:1px solid #3a2a5a;color:#7a6a9a}
.actions button.alt:hover{background:rgba(123,104,238,.08);border-color:#7b68ee;color:#c0b8d0}
.actions button.success{background:rgba(100,220,150,.15);border:1px solid rgba(100,220,150,.3);color:#64c896}
.actions button.success:hover{background:rgba(100,220,150,.25);color:#80e0a0}
.actions select{background:#0e0e1a;color:#d0c8e0;border:1px solid #1e1e3a;border-radius:6px;padding:6px 10px;font-size:12px;outline:none}
.actions select:focus{border-color:#7b68ee}
.toast{position:fixed;bottom:20px;left:50%;transform:translateX(-50%);background:#1a1a2e;border:1px solid #7b68ee;color:#e0c8ff;padding:10px 20px;border-radius:8px;font-size:12px;opacity:0;transition:opacity .3s;pointer-events:none;z-index:999}
.toast.show{opacity:1}
.rec-bar{background:linear-gradient(135deg,rgba(26,26,46,.93),rgba(16,16,30,.93));border:1px solid rgba(123,104,238,.12);border-radius:10px;padding:14px 16px;margin:12px 0;display:flex;gap:12px;flex-wrap:wrap;align-items:center}
.rec-bar .label{font-size:11px;color:#7a6a9a;margin-right:4px}
.rec-bar a{font-size:12px;color:#7b68ee;text-decoration:none;padding:4px 10px;border:1px solid rgba(123,104,238,.2);border-radius:6px;transition:all .2s}
.rec-bar a:hover{background:rgba(123,104,238,.1);border-color:#7b68ee}
.seo-content{margin-top:24px;padding:20px;border-top:1px solid rgba(123,104,238,.08)}
.seo-content h2{font-size:16px;color:#c4a0ff;margin-bottom:10px;letter-spacing:.5px}
.seo-content p{font-size:13px;color:#a898b8;margin-bottom:10px;line-height:1.7}
.seo-content ul{list-style:none;padding:0}
.seo-content ul li{font-size:12px;color:#8a7a9a;padding:4px 0 4px 16px;position:relative}
.seo-content ul li::before{content:'\25B8';position:absolute;left:0;color:#5a4a7a}
.seo-content h3{font-size:14px;color:#c4a0ff;margin:16px 0 8px}
.footer{text-align:center;padding:30px 0;color:#3a2a5a;font-size:11px;margin-top:20px}
.footer a{color:#5a4a7a;text-decoration:none}
.footer a:hover{color:#7b68ee}
select{background:#0e0e1a;color:#d0c8e0;border:1px solid #1e1e3a;border-radius:6px;padding:6px 10px;font-size:12px;outline:none}
input[type="checkbox"]{accent-color:#7b68ee}
@media(max-width:600px){h1{font-size:22px}.stats{grid-template-columns:repeat(3,1fr)}}
</style>
</head>
<body>
<div class="container">
<div style="font-size:12px;color:#5a4a7a;margin-bottom:10px">
<a href="/" style="color:#5a4a7a;text-decoration:none">Home</a>
<span style="color:#3a2a5a">›</span>
<a href="/tools/" style="color:#5a4a7a;text-decoration:none">Tools</a>
<span style="color:#3a2a5a">›</span>
<span style="color:#7a6a9a">📋 Text Diff Checker</span>
</div>
<h1>📋 Text Diff Checker</h1>
<p class="sub">Compare two texts and highlight differences — word-level diff</p>
<div class="trust-badge">🔒 Your data never leaves your browser. 100% local processing.</div>
<div class="tool-layout">
<div>
<div style="font-size:11px;color:#5a4a7a;margin-bottom:4px">Original Text (A)</div>
<textarea id="textA" placeholder="Paste original text here..." oninput="computeDiff()"></textarea>
</div>
<div>
<div style="font-size:11px;color:#5a4a7a;margin-bottom:4px">Modified Text (B)</div>
<textarea id="textB" placeholder="Paste modified text here..." oninput="computeDiff()"></textarea>
</div>
</div>
<div class="actions">
<button onclick="swapTexts()">⇄ Swap A↔B</button>
<button onclick="clearAll()">Clear All</button>
</div>
<div style="font-size:11px;color:#5a4a7a;margin-bottom:6px">Diff Result</div>
<div id="diffOutput" style="background:#0e0e1a;border:1px solid #1e1e3a;border-radius:10px;padding:14px;color:#d0c8e0;font-size:13px;font-family:'SF Mono','Fira Code',monospace;min-height:100px;white-space:pre-wrap;word-break:break-word"></div>
<div class="rec-bar" id="recBar">
<span class="label">⚡ Also try:</span>
<a href="/tools/char-counter.html">Chinese Character Counter</a>
<a href="/tools/base64-encoder.html">Base64 Encoder/Decoder</a>
<a href="/tools/url-encoder.html">URL Encoder/Decoder</a>
<a href="/tools/json-formatter.html">JSON Formatter</a>
<a href="/tools/markdown-preview.html">Markdown Preview</a>
<a href="/tools/text-splitter.html">Text Splitter</a>
<a href="/tools/">🧰 All Tools</a>
</div>
<div class="seo-content">
<h2>Free Online Text Diff Checker — Compare Text Instantly</h2>
<p>Our free text diff checker lets you compare two blocks of text and see exactly what changed. Whether you're reviewing document revisions, checking code changes, comparing drafts, or verifying data accuracy, the diff tool highlights additions (green), deletions (red), and unchanged text in real time. All processing happens in your browser — your text never leaves your device.</p>
<p>The diff algorithm works at the word level, making it perfect for natural language comparison, code review, plagiarism checking, and version control. Unlike server-based diff tools that require uploads, our tool respects your privacy completely. Paste two versions and instantly see every change.</p>
<h3>Key Features</h3>
<ul>
<li><strong>Side-by-side comparison</strong> — Two input panels with color-coded diff output</li>
<li><strong>Word-level diff</strong> — Highlights individual word changes, not just line-level</li>
<li><strong>Color-coded results</strong> — Green for additions, red for deletions, neutral for unchanged</li>
<li><strong>100% private</strong> — All comparison processing runs in your browser</li>
<li><strong>No limits</strong> — Compare texts of any length with instant results</li>
</ul>
<h3>Related Tools</h3>
<ul>
<li><a href="/remove-duplicates.html">Remove Duplicate Lines</a></li>
<li><a href="/sort-lines.html">Sort Lines</a></li>
<li><a href="/char-counter.html">Chinese Character Counter</a></li>
<li><a href="/base64-encoder.html">Base64 Encoder/Decoder</a></li>
<li><a href="/url-encoder.html">URL Encoder/Decoder</a></li>
<li><a href="/json-formatter.html">JSON Formatter</a></li>
<li><a href="/markdown-preview.html">Markdown Preview</a></li>
<li><a href="/text-splitter.html">Text Splitter</a></li>
<li><a href="/line-numberer.html">Line Numberer</a></li>
<li><a href="/text-r
</ul>
</div>
<div class="footer">
<p>📋 Text Diff Checker | <a href="/tools/">More Tools</a> | <a href="/">Home</a> | <a href="/privacy.html">Privacy</a></p>
<p style="margin-top:6px;font-size:10px">© 2026 Textools · All processing is local · Zero data uploads</p>
</div>
</div>
<div id="toast" class="toast"></div>
<script>
function showToast(msg){
var el = document.getElementById('toast');
el.textContent = msg;
el.classList.add('show');
setTimeout(function(){ el.classList.remove('show'); }, 2500);
}
var diffTimeout;
function computeDiff(){
clearTimeout(diffTimeout);
diffTimeout=setTimeout(function(){
var a=document.getElementById('textA').value;
var b=document.getElementById('textB').value;
diffAndRender(a,b);
},200);
}
function diffAndRender(a,b){
var out=document.getElementById('diffOutput');
if(!a&&!b){out.innerHTML='<span style="color:#5a4a7a">Paste text in both panels to see diff</span>';return;}
var wordsA=a.split(/(\s+)/);
var wordsB=b.split(/(\s+)/);
var lcs=buildLCS(wordsA,wordsB);
var html='';
var ai=0,bi=0;
for(var k=0;k<lcs.length;k++){
var lcsWord=lcs[k];
while(ai<wordsA.length&&wordsA[ai]!==lcsWord){
html+='<span style="background:rgba(255,80,80,0.2);color:#ff6b6b">'+escHtml(wordsA[ai])+'</span>';
ai++;
}
while(bi<wordsB.length&&wordsB[bi]!==lcsWord){
html+='<span style="background:rgba(80,200,120,0.2);color:#64c896">'+escHtml(wordsB[bi])+'</span>';
bi++;
}
if(ai<wordsA.length){html+=escHtml(lcsWord);ai++;bi++;}
}
while(ai<wordsA.length){html+='<span style="background:rgba(255,80,80,0.2);color:#ff6b6b">'+escHtml(wordsA[ai])+'</span>';ai++;}
while(bi<wordsB.length){html+='<span style="background:rgba(80,200,120,0.2);color:#64c896">'+escHtml(wordsB[bi])+'</span>';bi++;}
out.innerHTML=html||'<span style="color:#5a4a7a">No differences found</span>';
}
function buildLCS(a,b){
var m=a.length,n=b.length;
var dp=Array(m+1);for(var i=0;i<=m;i++)dp[i]=Array(n+1).fill(0);
for(var i=1;i<=m;i++)for(var j=1;j<=n;j++)dp[i][j]=a[i-1]===b[j-1]?dp[i-1][j-1]+1:Math.max(dp[i-1][j],dp[i][j-1]);
var res=[];var i=m,j=n;
while(i>0&&j>0){
if(a[i-1]===b[j-1]){res.unshift(a[i-1]);i--;j--;}
else if(dp[i-1][j]>dp[i][j-1])i--;else j--;
}
return res;
}
function escHtml(s){return s.replace(/&/g,'&').replace(/</g,'<').replace(/>/g,'>');}
function swapTexts(){var a=document.getElementById('textA'),b=document.getElementById('textB');var t=a.value;a.value=b.value;b.value=t;computeDiff();}
function clearAll(){document.getElementById('textA').value='';document.getElementById('textB').value='';computeDiff();showToast('Cleared');}
</script>
</body>
</html>