JS 代码实现文本比较并突出差异 - 找出最接近的文本段
可以使用 JavaScript 中的字符串比较和操作函数来实现上述需求。以下是一个可能的实现:
var txA = document.getElementById('TX1').value;
var txB = document.getElementById('TX2').value;
var startIdx = 0;
var endIdx = 0;
// 找出原始文本中与参考文本最接近的一段文字
for (var i = 0; i < Math.min(txA.length, txB.length); i++) {
if (txA[i] !== txB[i]) {
startIdx = i;
break;
}
}
for (var j = 0; j < Math.min(txA.length, txB.length); j++) {
if (txA[txA.length - 1 - j] !== txB[txB.length - 1 - j]) {
endIdx = txA.length - j;
break;
}
}
var txC = txA.substring(startIdx, endIdx);
// 在 TX3 中展示 TX_B 和 TX_C 的差异
var diff = '';
for (var k = 0; k < txB.length; k++) {
if (k < startIdx || k >= endIdx) {
diff += '<span style='color: purple'>' + txB[k] + '</span>';
} else if (txB[k] !== txC[k - startIdx]) {
diff += '<span style='color: blue'>' + txC[k - startIdx] + '</span>';
} else {
diff += txB[k];
}
}
document.getElementById('TX3').innerHTML = diff;
注意,上述代码假设 TX1、TX2 和 TX3 是 HTML 文档中对应的文本框元素,并将它们的值分别赋给变量 txA、txB。最后,使用 innerHTML 将差异的文本赋给 TX3 的内容,其中使用了不同颜色的 <span> 标签来标识不同的差异。
原文地址: https://www.cveoy.top/t/topic/qqOJ 著作权归作者所有。请勿转载和采集!