我的jQuery“compare”函数存在一些问题。它的任务是比较两个文本区域并突出差异。
例如。 “我的名字是迈克尔”在一个文本区域，“我的名字是米歇尔”在另一个文本区域。
我的函数将返回两个输入并突出显示第一个输入中的字符“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”，在第二个文本中，我想输入一个突出显示差异的空白区域（缺少的字符）。
答案 0 :(得分：6)
只有当两个字符串具有完全相同的长度和相同的单词排列时，您的代码才会起作用，否则它会分解，即如果您在测试字符串的开头添加一个额外的字符。
经过一些编码我设法得到下面的代码，它比较两个字符串，找到缺少的字符/单词，额外的字符/单词和错误的拼写：
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;
}
工作原理：
答案 1 :(得分：0)
我的代码将第一个textarea单词与第二个textare单词进行比较。例如..第一个textarea文本是'你好吗'和第二个textarea文本是'我很好'。它会比较'如何'与'我'和'和'是'我'.. 请尝试使用此代码...我的 fiddle
$(function () {
$('#btnCompare').on('click', function () {
compare();
return false;
});
function compare() {
$('#divColLeft').empty();
$('#divColRight').empty();
var textOne = $.trim($('#taOneComp').val());
var textTwo = $.trim($('#taTwoComp').val());
var TempArr1 = textOne.split(' ');
var TempArr2 = textTwo.split(' ');
var arr1 = [];
for (var i = 0; i < TempArr1.length; i++) {
if (TempArr1[i] !== "" && TempArr1[i] !== null) {
arr1.push(TempArr1[i]);
}
}
var arr2 = [];
for (var i = 0; i < TempArr2.length; i++) {
if (TempArr2[i] !== "" && TempArr2[i] !== null) {
arr2.push(TempArr2[i]);
}
}
var minArrLen = arr1.length < arr2.length ? arr1.length : arr2.length;
for (var x = 0; x < minArrLen; x++) {
var maxCharLen = arr1[x].length > arr2[x].length ? arr1[x].length : arr2[x].length;
for (var y = 0; y < maxCharLen; y++) {
if (arr1[x].charAt(y) == ' ') {
$('#divColLeft').append('<span class="missing">' + arr2[x].charAt(y) + '</span>');
$('#divColRight').append('<span class="missmatch">' + arr2[x].charAt(y)) + '</span>';
}
else if (arr2[x].charAt(y) == ' ') {
$('#divColLeft').append('<span class="missing">' + arr1[x].charAt(y) + '</span>');
$('#divColRight').append('<span class="missmatch">' + arr1[x].charAt(y)) + '</span>';
} else if (arr1[x].charAt(y) == arr2[x].charAt(y)) {
$('#divColLeft,#divColRight').append(arr1[x].charAt(y));
}
else {
$('#divColLeft').append('<span class="missmatch">' + arr1[x].charAt(y) + '</span>');
$('#divColRight').append('<span class="missing">' + arr2[x].charAt(y) + '</span>');
}
}
$('#divColLeft').append(' ');
$('#divColRight').append(' ');
}
if (minArrLen < arr1.length) {
for (var Len = minArrLen; Len < arr1.length; Len++) {
$('#divColLeft').append(arr1[Len])
.append(' ');
}
} else if (minArrLen < arr2.length) {
for (var Len = minArrLen; Len < arr2.length; Len++) {
$('#divColRight').append(arr2[Len])
.append(' ');
}
}
}
});
答案 2 :(得分：-1)
$(document).ready(function () {
$('#btnCompare').on('click', function () {
compare();
});
function compareText(textOne, textTwo)
{
var len = Math.min(textOne.length, textTwo.length);
for (var i=0;i<len; i++)
{
if (textOne.charAt(i) == textTwo.charAt(i)) continue;
return i; // this character is different
}
if (textOne.length == textTwo.length) return -1; // same
return i;
}
function compare() {
$('#divColLeft').empty();
$('#divColRight').empty();
var textOne = $('#taOneComp').val();
var textTwo = $('#taTwoComp').val();
var diffIndex = compareText(textOne, textTwo);
if (diffIndex == -1)
{
// TODO: tell user they are identical
$('#divColLeft').html('Identical');
} else {
// if textTwo has more characters,
// add a dummy character for highlighting to textOne
if (diffIndex >= (textOne.length)) textOne += '_';
var char = textOne.charAt(diffIndex);
// highlight differing character
var tmpLeft = textOne.substring(0, diffIndex);
tmpLeft += "<span style='background-color:yellow;font-weight:bold'>" + char + "</span>";
tmpLeft += textOne.substring(diffIndex+1);
$('#divColLeft').html(tmpLeft);
}
}
});