JavaScript 代码:比较两个文本框内容并高亮显示差异
你可以使用 jsdiff 库来实现这个需求。首先,你需要在 HTML 文件中引入 jsdiff 库的 CDN 链接:
<script src='https://cdnjs.cloudflare.com/ajax/libs/diff/4.0.1/diff.min.js'></script>
然后,你可以使用以下代码来实现你的需求:
// 获取文本框的值
var originalText = document.getElementById('TX1').value;
var referenceText = document.getElementById('TX2').value;
// 使用 jsdiff 库来获取差异
var diff = Diff.diffWords(referenceText, originalText);
// 创建一个新的文本节点,用于展示差异
var result = document.createElement('span');
diff.forEach(function(part) {
var color = part.added ? 'blue' :
part.removed ? 'red' : 'purple';
var span = document.createElement('span');
span.style.color = color;
span.appendChild(document.createTextNode(part.value));
result.appendChild(span);
});
// 将差异展示在 TX3 中
var tx3 = document.getElementById('TX3');
tx3.innerHTML = '';
tx3.appendChild(result);
在这段代码中,我们首先获取了 TX1 和 TX2 的值,然后使用 jsdiff 库的 diffWords 函数来获取两段文字的差异。接下来,我们创建一个新的文本节点,并根据差异的类型为每个部分设置不同的颜色。最后,我们将差异展示在 TX3 中。
请确保在使用这段代码之前,文本框已经被正确地获取,并且 jsdiff 库的 CDN 链接已经被添加到 HTML 文件中。
原文地址: https://www.cveoy.top/t/topic/qqOR 著作权归作者所有。请勿转载和采集!