-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
129 lines (105 loc) · 3.67 KB
/
index.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
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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>DiffPerChar - Text Difference Visualization</title>
<style>
table.diffTable {
border: 1px solid #aaaaaa;
border-collapse: collapse;
border-style: groove;
border-radius: 4px;
width: 40%;
table-layout: fixed;
}
table.diffTable th,
table.diffTable td {
border: 1px solid #aaaaaa;
text-align: center;
}
table.diffTable th {
background-color: azure;
padding: 8px;
}
table.diffTable td {
font-family: monospace;
font-size: larger;
padding: 4px;
}
table.inputTable {
border: none;
padding: 8px;
border-collapse: collapse;
width: 100%;
table-layout: fixed;
text-align: left;
}
table.inputTable td:nth-child(2) input {
font-family: 'Courier New', monospace;
width: 100%;
box-sizing: border-box;
}
.diff {
background-color: #ffffaa;
}
</style>
</head>
<body>
<div id="inputContainer"></div>
<div id="diffContainer"></div>
<script>
const urlParams = new URLSearchParams(window.location.search);
const columnA = urlParams.get('columnA') || 'textA';
const columnB = urlParams.get('columnB') || 'textB';
const textA = urlParams.get('textA') || '';
const textB = urlParams.get('textB') || '';
function compareStrings(str1, str2, colA, colB) {
let diffResult = '<table class="diffTable">';
diffResult +=
`<tr>
<th style="width: 5%;"></th>
<th style="width: 45%;">${colA}</th>
<th style="width: 45%;">${colB}</th>
<th style="width: 5%;">Diff</th>
</tr>`;
for (let i = 0; i < Math.max(str1.length, str2.length); i++) {
const char1 = str1[i] || '';
const char2 = str2[i] || '';
let diffClass = '';
if (char1 !== char2) {
diffClass = 'diff';
}
const diffContent = char1 === char2 ? '' : `❌`;
diffResult += `<tr class="${diffClass}">
<td>${i + 1}</td>
<td>${char1}</td>
<td>${char2}</td>
<td>${diffContent}</td>
</tr>`;
}
diffResult += '</table>';
document.getElementById('diffContainer').innerHTML = diffResult;
}
function createInputTable(str1, str2, colA, colB) {
let inputTableText = '<table class="inputTable">';
inputTableText += `<tr>
<th style="width: 10%;"></th>
<th style="width: 90%;"></th>
</tr>`;
inputTableText += `<tr>
<td>${colA}</td>
<td><input type="text" id="inputTextA" value="${str1}" oninput="compareStrings(this.value, document.getElementById('inputTextB').value, columnA, columnB)"></td>
</tr>`;
inputTableText += `<tr>
<td>${colB}</td>
<td><input type="text" id="inputTextB" value="${str2}" oninput="compareStrings(document.getElementById('inputTextA').value, this.value, columnA, columnB)"></td>
</tr>`;
inputTableText += '</table>';
document.getElementById('inputContainer').innerHTML = inputTableText;
}
createInputTable(textA, textB, columnA, columnB);
compareStrings(textA, textB, columnA, columnB);
</script>
</body>
</html>