可以使用 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> 标签来标识不同的差异。

JS 代码实现文本比较并突出差异 - 找出最接近的文本段

原文地址: https://www.cveoy.top/t/topic/qqOJ 著作权归作者所有。请勿转载和采集!

免费AI点我,无需注册和登录