我有一些问题我的jQuery“比较”功能。其任务是比较两个文字区域，并突出差异。
例如。 “我的名字是迈克尔”，在一个文字区域，“我的名字是米歇尔”在另一个文本区域。
我的函数将返回两个输入并从第一个输入中突出显示“a”，并从第二个输入中突出显示一个缺失的字符。
这是功能如何看起来如此远，但它似乎没有100％的时间工作。
$(function () {
$('#btnCompare').on('click',function () {
compare();
});
function compare() {
$('#divColLeft').empty();
$('#divColRight').empty();
var textOne = $('#taOneComp').val();
var textTwo = $('#taTwoComp').val();
var output;
var outputX;
var arrTextOne = [];
var arrTextTwo = [];
for (var i = 0; i < textOne.length; i++) {
output = textOne.charAt(i);
arrTextOne.push(output);
}
for (var x = 0; x < textTwo.length; x++) {
outputX = textTwo.charAt(x);
arrTextTwo.push(outputX);
}
$.each(arrTextOne,function (y,e) {
if ($.inArray(e,arrTextTwo) == -1) {
$('#divColLeft').append(e);
$('#divColLeft').highlight(e);
} else {
$('#divColLeft').append(arrTextOne[y]);
}
});
$.each(arrTextTwo,function (z,f) {
if ($.inArray(f,arrTextOne) == -1) {
$('#divColRight').append(f);
$('#divColRight').highlight(f);
} else {
$('#divColRight').append(arrTextTwo[z]);
}
});
}
});
更新：更准确地改进原来的问题
如果在两个文本中的任何一个之前有一些包含字符“a”，这是应该突出显示的区别。在第一个文本中，应该突出显示“a”，在第二个文本中，我想输入一个突出显示差异的空白空间(缺少的字符)。
解决方法
您的代码只有在两个字符串具有完全相同的长度和相同的字排列时才有效，否则会分解，即在测试字符串的开头添加一个额外的字符。
经过一些编码，我设法得到了下面的代码，它比较了两个字符串，找到缺少的字符/单词，额外的字符/单词和错误的拼写：
经过一些编码，我设法得到了下面的代码，它比较了两个字符串，找到缺少的字符/单词，额外的字符/单词和错误的拼写：
function compare() {
var elm1 = document.getElementById("div1"),elm2 = document.getElementById("txt"),output = document.getElementById("div2"),txt1 = elm1.innerHTML,//original text
txt2 = elm2.value,//submitted text
arr1 = txt1.split(" "),//split original text to array of words
arr2 = []; //miss matching words will be added here
//filter txt1 and txt2 from matching words and add miss matching to arr2///////
for (var i in arr1) {
var match = txt2.match(new RegExp("\\b" + arr1[i] + "\\b"));
if (match) {
txt2 = txt2.replace(new RegExp("\\s?" + arr1[i]),"");
txt1 = txt1.replace(new RegExp("\\s?" + arr1[i]),"");
} else if (!match) {
arr2.push(arr1[i]);
}
}
//compare miss matching words from original and submitted text,if matching charachters is more that 50% highlight missing and extra characters
var arr3 = txt2.split(" "),//convert filtered submitted text to words array
right = elm1.innerHTML,wrong = elm2.value;
for (var a in arr2) {
for (var b in arr3) {
var match2 = arr3[b].match(new RegExp("[" + arr2[a] + "]","g")),t = (arr2[a].length > arr3[b].length) ? arr2[a].length : arr3[b].length;
if (match2 && match2.length >= t * 0.5) { //check for words that look similar
txt2 = txt2.replace(new RegExp("\\s?" + arr3[b]),"");
txt1 = txt1.replace(new RegExp("\\s?" + arr2[a]),"");
var str1 = "",str2 = "",n = 0;
for (var c = 0; c < t; c++) {
if (arr2[a].charAt(c) === arr3[b].charAt(c + n)) {
str1 += arr3[b].charAt(c + n);
str2 += arr2[a].charAt(c);
} else if (arr2[a].charAt(c) !== arr3[b].charAt(c + n)) {
if(arr2[a].charAt(c + 1) == arr3[b].charAt(c + n)){
str2 += arr2[a].charAt(c).fontcolor("blue");
str1 += "_".fontcolor("red");
n--;
}else if(arr2[a].charAt(c) == arr3[b].charAt(c + n + 1)){
str1 += arr3[b].charAt(c + n).fontcolor("orange");
n++;
c--;
}else{
str1 += arr3[b].charAt(c + n).fontcolor("red");
str2 += arr2[a].charAt(c).fontcolor("green");
}
}
}
wrong = wrong.replace(arr3[b],str1);
right = right.replace(arr2[a],str2);
}
}
}
//check for extra words//////////////////////////////////////
extra = txt2.split(" ");
for(var d in extra){
wrong = wrong.replace(extra[d],extra[d].fontcolor("grey"));
}
//check for missing words//////////////////////////////////////
missing = txt1.split(" ");
for(var f in missing){
right = right.replace(missing[f],missing[f].fontcolor("blue"));
}
output.innerHTML = wrong;
elm1.innerHTML = right;
}
怎么运行的：
>比较原始和提交的文本，并找到匹配的单词并将其删除>比较两个字符串中剩余的单词>如果两个词看起来相似(相等的字符=>总字符的50％)>检查丢失/额外/拼写错误的字符并突出显示。>从两个字符串中删除拼写错误的单词>突出显示原始文本中剩余的单词作为缺少的单词>突出显示提交的文本中剩余的单词作为额外的单词
