-
Notifications
You must be signed in to change notification settings - Fork 0
/
diff.html
73 lines (66 loc) · 2.57 KB
/
diff.html
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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Simple Diff Checker</title>
<style>
body {
font-family: Arial, sans-serif;
margin: 20px;
}
textarea {
width: 45%;
height: 200px;
margin-right: 5%;
}
#output {
margin-top: 20px;
}
.diff {
color: red;
}
</style>
</head>
<body>
<h1>Simple Diff Checker</h1>
<div>
<textarea id="file1" placeholder="Enter or paste content of file 1 here..."></textarea>
<textarea id="file2" placeholder="Enter or paste content of file 2 here..."></textarea>
</div>
<button onclick="checkDiff()">Check Differences</button>
<div id="output"></div>
<script>
function checkDiff() {
const file1Content = document.getElementById('file1').value.split('\n').map(line => line.trim());
const file2Content = document.getElementById('file2').value.split('\n').map(line => line.trim());
// Create sets from both files for quick lookup
const file1Set = new Set(file1Content);
const file2Set = new Set(file2Content);
// Find lines in file2 that are not in file1 (new lines)
const newLines = file2Content.filter(line => !file1Set.has(line));
// Find lines in file1 that are not in file2 (missing lines)
const missingLines = file1Content.filter(line => !file2Set.has(line));
// Display the differences
const outputDiv = document.getElementById('output');
outputDiv.innerHTML = '<h3>Differences:</h3>';
if (newLines.length > 0 || missingLines.length > 0) {
newLines.forEach(line => {
const newLineDiv = document.createElement('div');
newLineDiv.textContent = 'Added: ' + line;
newLineDiv.classList.add('new-line');
outputDiv.appendChild(newLineDiv);
});
missingLines.forEach(line => {
const missingLineDiv = document.createElement('div');
missingLineDiv.textContent = 'Missing: ' + line;
missingLineDiv.classList.add('missing-line');
outputDiv.appendChild(missingLineDiv);
});
} else {
outputDiv.innerHTML += '<p>No differences found.</p>';
}
}
</script>
</body>
</html>