iki istemci ile yazılmış metin alanlarını karşılaştırır jQuery

Question

jQuery "compare" işlevimle ilgili bazı sorunlarım var. Misyonu iki metin alanını karşılaştırmak ve farklılıkları vurgulamaktır. Örn.,

örn. Bir metin alanında "Benim adım Michael" ve diğerinde "Benim adım Michel".

İşleçim her iki girdiyi de döndürmeli ve ilk girdiden "a" karakterini vurgulamalı ve ikinci karakterdeki eksik karakteri vurgulamalıdır.

İşlev şu ana kadar nasıl görünüyor, ancak zamanın% 100'ünde çalışmıyor gibi görünüyor.

$(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]); 
     } 
    }); 
} 

}); 

Güncelleme: Daha kesin ve bazı kömürü "a" iki metnin herhangi önce, bu vurgulanmalıdır bir farktır includs ise orijinal soruyu

geliştirmek. İlk metinde "a" vurgulanmalı, ikinci metinde ben farkı vurgulayan boş bir alan (eksik karakter) girmek istiyorum. İki dizeleri aynı uzunluğa ve aynı kelimeleri düzenlemeyi sahip tek eğer test dize başında fazladan bir karakter eklerseniz

Answer 1

Kodunuz aksi takdirde yani aşağı kıracak, çalışacaktır. ben aşağıdaki kodu ile gelip başardı bazı kodlama sonra
, bu iki dizeyi karşılaştırır ve eksik mevcut karakter/sözcükleri, fazladan karakter/kelime ve yanlış yazımlar bulmak:

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; 
} 

DEMO

Nasıl Çalışır :

1. orijinal karşılaştırın ve metinler gönderilen ve eşleştirme kelimeleri bulmak ve onlara
kaldırmak iki kelime benzer (eşit karakterleri toplam karakter =>% 50) eksik/ekstra/yanlış yazılmış karakterler için
2. çek bakmak ve onları vurgularsanız
3. hem dizeleri
4. kalan kelimeleri karşılaştırın.
6. vurgulayın eksik kelimeler olarak orijinal metinde kalan kelimeler ekstra kelimeler olarak sunulan metinde kalan kelimeler

Answer 2

$(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); 
     } 
    } 
}); 

Answer 3

Kodum

Vurgu ilk metin alanı sözcükleri karşılaştırın

hem dizeleri gelen yanlış yazılmış kelimeleri kaldırın ikinci tekstüre kelimelerle. Örnek için: ilk textarea metni 'Nasılsın?' ve ikinci textarea metni 'Ben iyiyim'. 'Ben' ve 'ben' ile 'nasıl', 'ben' ile karşılaştırır .. Lütfen bu kodu deneyin ... My 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(' '); 
        } 
       } 
      } 
     });