问比较两个客户端类型的文本字段jQuery
EN

Stack Overflow用户

提问于 2013-03-29 16:02:05

回答 3查看 2.7K关注 0票数 16

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

例如：在一个文本区域中显示“我的名字是Michael”，在另一个文本区域中显示“我的名字是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“应该突出显示，在第二个文本中，我想输入一个空格来突出显示差异(缺少的字符)。

html

jquery

回答 3

Stack Overflow用户

回答已采纳

发布于 2013-04-07 19:56:25

只有当两个字符串具有完全相同的长度和相同的单词排列时，您的代码才能正常工作，否则它将崩溃，即如果您在测试字符串的开头添加额外的字符。

经过一些编码后，我设法想出了下面的代码，它比较两个字符串，并找到缺少的字符/单词，额外的字符/单词和错误的拼写：

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

工作原理：

比较原始文本和提交的文本并查找匹配的单词并将其删除如果两个单词看起来相似(等于字符总数的50% )，则将两个字符串中的其余单词作为缺少/额外/拼写错误的字符进行比较并将其突出显示。
=> remaining in the original text as missing words
Highlight

remaining words in the submitted text as extra words G219>

票数 7

Stack Overflow用户

发布于 2013-04-09 08:25:55

我的代码将第一个文本区域的单词与第二个文本进行比较示例..first文本区域文本是'How are words.For‘，第二个文本区域文本是'I am fine’。它将比较'how‘与'I’以及'are‘与’am‘。请试用此code...My

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

票数 0

Stack Overflow用户

发布于 2013-04-02 18:37:33

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