Question

我需要一个文本框，每次文本更改时，我都知道究竟发生了什么变化。我目前正在使用JQuery的监听器来改变我的输入元素，我所做的是：

文字更改时
从方框a1中获取文本，并与方框a2中的内容进行比较。
如果有更改，请将其记录到输出textarea

以下是示例https://codepen.io/nikolaevra/pen/eeWWbo

我目前正在使用以下差异库https://github.com/kpdecker/jsdiff，它具有O（NM）效率，这是很多。

有没有办法使用JQuery或类似的东西获得对textarea的确切更改？例如，如果我在a1和a2中都有test，然后将a1更改为testing，我希望将ing视为所做的更改。

修改我尝试了一下这个方法，这是我发现的一个问题。当我运行diff = "testing".replace("test",''); =＆gt;根据需要ing，但是当我尝试diff = "testing a potato cannon".replace("testing potato cannon",''); =＆gt; testing a potato cannon，我只改变了一个角色。这是我想要避免的大量开销。在这种情况下，我只想知道值的变化位置以及更改后的值。不是字符串的整个尾部。

Answer 1

nikolaevra，您尝试过使用javascript的替换方法吗？例如diff = [a1的值] .replace（[a2的值]，＆＃39;＆＃39;）;

Answer 2

请考虑字符串a1中的内容是常量文本，字符a2中的内容是您进行更改的位置。

我们只是说a1中的值是"test";

试试这个JavaScript：

var constValue = $('#a1').val();
$('#a2').change(function() {
    var changingValue = $('a2').val();                   // say the value entered is "testing"
    console.log(changingValue.replace(constValue, '');   // gives you "ing"
}

这将为您提供字符串a2中已更改/输入的（新）值，并将其记录到您的控制台。

您在这里使用的逻辑很简单：

读取字符串a2中的值，并使用a1中的值替换字符串a2中的（如果存在），从而为您提供更改后的值。您无需为此使用任何库。 JavaScript为您提供了这个名为replace的函数。

如果有任何疑问，请告诉我。

Answer 3

您可以使用此方法来实现您的目标：

function getDifference(a, b)
{
  var i = 0;
  var j = 0;
  var result = "";

  while (j < b.length)
  {
    if (a[i] != b[j] || i == a.length)
        result += b[j];
    else
        i++;
    j++;
  }
  return result;
 }

然后你需要创建一个方法来从你的文本框中获取值并在你的按钮onclick事件中使用它，我使用了javascript，你可以使用jquery：

function findDiff(){
  var b1=  document.getElementById("b1").value;//sky is blue
  var b2= document.getElementById("b2").value;//sky is red
  document.getElementById("result").value=getDifference(b1,b2);//red
}

https://jsfiddle.net/eu2kvfxo/

Answer 4

我希望此代码可以帮助您

＆＃13;

<html>
<head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
   <script>
       $(document).ready(function () {
           var arr_text1 = new Array();
           var arr_text2 = new Array();
           var i=0;
           var text2nw="";
           $('#a2').on('input',function () {
               arr_text1 = $("#a1").val().split('');
               arr_text2 = $("#a2").val().split('');
               if (arr_text1[i] == arr_text2[i]) {
                              }
               else {
                   $('#output').val($("#a2").val().replace($("#a1").val(), ""));
                  // $('#output').val(text2nw);
               }
               if ($("#a2").val() != '') {
                   i++;
               }
               else {
                   i = 0;
                   $('#output').val('');
               }
           });
       });
   </script>
</head>
<body>

    <p>This is the original text:</p>
    <textarea id="a1" rows="4" cols="50" type="text"></textarea>

    <p>Change Text to something else here:</p>
    <textarea id="a2" rows="4" cols="50" type="text"></textarea>

    <p id="title">This are the changes that you made:</p>
    <textarea rows="10" cols="100" id="output" for="title"></textarea>

</body>
</html>

＆＃13;

查看更改侦听器中TextArea内部的更改

4 个答案: