写一段js代码:新建三个文本框id分别为TX1TX2TX3。TX1内为原始文本命名为TX_ATX2中为参考文本TX_B。需找出原始文本中与参考文本最接近的一段文字命名为TX_C并在TX3中展示TX_B和TX_C的差异以TX_B为基准补齐缺失部分并使用红色字体标识不一致部分用蓝色字体标识多出部分用紫色字体标识
可以使用JavaScript的字符串方法和DOM操作来实现这个需求。以下是一段实现的代码示例:
function findClosestText() {
var txA = document.getElementById('TX1').value; // 获取原始文本
var txB = document.getElementById('TX2').value; // 获取参考文本
// 使用Levenshtein距离算法计算文本的相似度
function levenshteinDistance(a, b) {
if (a.length === 0) return b.length;
if (b.length === 0) return a.length;
var matrix = [];
var i, j;
for (i = 0; i <= b.length; i++) {
matrix[i] = [i];
}
for (j = 0; j <= a.length; j++) {
matrix[0][j] = j;
}
for (i = 1; i <= b.length; i++) {
for (j = 1; j <= a.length; j++) {
if (b.charAt(i - 1) === a.charAt(j - 1)) {
matrix[i][j] = matrix[i - 1][j - 1];
} else {
matrix[i][j] = Math.min(
matrix[i - 1][j - 1] + 1, // 替换
matrix[i][j - 1] + 1, // 插入
matrix[i - 1][j] + 1 // 删除
);
}
}
}
return matrix[b.length][a.length];
}
var closestText = ''; // 最接近的文本
var minDistance = Number.MAX_VALUE; // 最小距离
// 遍历原始文本的每个段落,找到与参考文本最接近的段落
var paragraphs = txA.split('\n');
for (var i = 0; i < paragraphs.length; i++) {
var distance = levenshteinDistance(paragraphs[i], txB);
if (distance < minDistance) {
minDistance = distance;
closestText = paragraphs[i];
}
}
var txC = closestText; // 最接近的文本
// 在TX3中展示TX_B和TX_C的差异
var diff = '';
var maxLength = Math.max(txB.length, txC.length);
for (var i = 0; i < maxLength; i++) {
var charB = txB.charAt(i) || ''; // 参考文本的字符
var charC = txC.charAt(i) || ''; // 最接近文本的字符
if (charB === charC) {
diff += charB;
} else {
diff += '<span style="color: red">' + charB + '</span>'; // 补齐缺失部分,红色字体
if (charC) {
diff += '<span style="color: blue">' + charC + '</span>'; // 不一致部分,蓝色字体
}
}
}
if (txB.length < txC.length) {
diff += '<span style="color: purple">' + txC.substring(txB.length) + '</span>'; // 多出部分,紫色字体
}
document.getElementById('TX3').innerHTML = diff; // 将差异展示在TX3中
}
HTML部分可以这样写:
<input type="text" id="TX1" placeholder="原始文本">
<input type="text" id="TX2" placeholder="参考文本">
<input type="button" value="查找" onclick="findClosestText()">
<br>
<div id="TX3"></div>
这段代码首先定义了一个findClosestText函数,用于查找最接近的文本并展示差异。在函数内部,首先获取了原始文本(TX1)和参考文本(TX2)的值。然后使用Levenshtein距离算法计算文本的相似度,找到最接近的段落。接下来,使用循环比较参考文本和最接近文本的每个字符,并根据差异使用不同颜色的span标签包裹字符。最后,将差异的HTML内容展示在TX3中。
可以在浏览器中运行这段代码,输入原始文本和参考文本,点击查找按钮,即可在TX3中展示差异的文本
原文地址: https://www.cveoy.top/t/topic/iKAw 著作权归作者所有。请勿转载和采集!