設定 - textarea jquery maxlength
2つのクライアント型のテキストフィールドを比較するjQuery (2)
私はjQueryの "比較"機能にいくつか問題があります。 その使命は、2つのテキスト領域を比較し、違いを強調することです。
例えば。 あるテキスト領域では「私の名前はマイケル」、別のテキストエリアでは「私の名前はミシェル」です。
私の関数は、両方の入力を返し、最初の入力からchar "a"を強調表示し、2番目の入力から欠落した文字を強調表示します。
これはこれまでのところどのように見えるのですか？しかし、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]);
}
});
}
});更新：より正確に、元の質問を改善する
もし2つのテキストのいずれかの前にchar "a"を含むものがあれば、これを強調表示する必要があります。 最初のテキストでは、 "a"が強調表示され、2番目のテキストでは、差異を強調表示している空のスペース（欠落している文字）を入力します。
あなたのコードは、2つの文字列が正確に同じ長さと同じ単語配列を持っている場合にのみ機能します。そうでなければ、テスト文字列の先頭に余分な文字を追加すると分解されます。
いくつかのコーディングの後で、私は以下のコードを考え出しました。それは2つの文字列を比較して、欠落したcharcters / words、余分な文字/単語および間違ったスペルを見つけます：
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;
} 使い方：
- 元のテキストと提出されたテキストを比較し、一致する単語を見つけて削除する
- 両方の文字列の残りの単語を比較する
- 2つの単語が類似している場合（等しい文字=全文字の> 50％）、
- 欠けている/余分な/スペルミスのない文字をチェックし、強調表示します。
- 両方の文字列からスペルの間違った単語を削除する
- 元のテキストの残りの単語を不足している単語として強調表示する
- 提出されたテキストの残りの単語を余分な単語として強調表示する
私のコード最初のtextarea単語を2番目のtextare wordsと比較します。例えば..最初のtextareaテキストは 'How are you'、2番目のtextareaテキストは 'I am fine'です。 'how'と 'I'と 'are' 'am' ..このコードを試してください...私の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(' ');
}
}
}
});