jquery - 比较两个客户端键入的文本字段jQuery

Question

我的 jQuery“比较”功能有一些问题。它的任务是比较两个文本区域并突出显示差异。

例如。一个文本区域中的“My name is Michael”，另一个文本区域中的“My name is Michel”。

我的函数将返回两个输入并突出显示第一个输入中的字符“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”，在第二个文本中我想输入一个突出显示差异的空白区域（丢失的字符）。

Answer 1

只有当两个字符串具有完全相同的长度和相同的单词排列时，您的代码才会起作用，否则它会崩溃，即如果您在测试字符串的开头添加一个额外的字符。
经过一些编码后，我设法想出了下面的代码，它比较了两个字符串并找到丢失的字符/单词、多余的字符/单词和错误的拼写：

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. 比较原始和提交的文本并找到匹配的单词并将它们删除
2. 比较两个字符串中的剩余单词
3. 如果两个词看起来相似（相等的字符 => 总字符的 50%）
4. 检查缺失/额外/拼写错误的字符并突出显示它们。
5. 从两个字符串中删除拼写错误的单词
6. 将原文中剩余的词高亮为缺失词
7. 将提交的文本中剩余的单词突出显示为额外的单词

Answer 2

我的代码将第一个 textarea 单词与第二个 textare 单词进行比较。例如 ..first textarea 文本是“你好吗”，第二个 textarea 文本是“我很好”。它将比较“how”与“I”和“are”与'am'.. 请试试这个代码......我的小提琴

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

Answer 3

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