Javascript 使用on change listener查看TextArea内的更改内容

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

当文本发生变化时

从框a1中获取文本，并与框a2中的内容进行比较

如果有更改，请将其记录到输出文本区域

这是一个样本

我目前正在使用下面的diff库，它有O（NM）的效率，这是很多

有没有一种方法可以获得使用JQuery或类似的东西对textarea所做的精确更改？例如，如果我在a1和a2中都进行了

test

，然后将a1更改为

testing

，我希望看到

ing

作为所做的更改

编辑：

---

我尝试了一下这种方法，这是我发现的一个问题。当我运行

diff=“testing”时，替换（“test”），“”=>
ing
正如所需，但当我尝试
diff=“测试土豆加农炮”时，请替换（“测试土豆加农炮”）=>
测试土豆炮
，我只更改了一个字符。这是我想要避免的大量开销。在这种情况下，我只想知道值在哪里更改，以及更改为什么。不是字符串的整个尾部。
nikolaevra，您是否尝试过使用javascript的替换方法？e、 g差异=[a1的值]。替换（[a2的值]，''
 nikolaevra，你试过使用javascript的替换方法吗？e、 g差异=[a1的值]。替换（[a2的值]，''
 考虑字符串
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
的函数

如果还有任何疑问，请务必告诉我。
请考虑字符串
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
的函数

如果还有任何疑问，请务必告诉我。
您可以使用此方法来实现所需的：

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

您可以使用此方法来实现所需：

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

我希望这段代码能对您有所帮助



$（文档）.ready（函数（）{
var arr_text1=新数组（）；
var arr_text2=新数组（）；
var i=0；
var text2nw=“”；
$（'#a2'）。在（'input'，function（）{
arr#u text1=$（“#a1”）.val（）.split（“”）；
arr#u text2=$（“#a2”）.val（）.split（“”）；
如果（arr_text1[i]==arr_text2[i]）{
}
否则{
$（“#输出”）.val（$（“#a2”）.val（）。替换（$（“#a1”）.val（），”）；
//$（'#output'）.val（text2nw）；
}
如果（$（“#a2”）.val（）！=”）{
i++；
}
否则{
i=0；
$（'输出'）.val（''）；
}
});
});
原文如下：

在此处将文本更改为其他内容：

以下是您所做的更改：
我希望这段代码能对您有所帮助



$（文档）.ready（函数（）{
var arr_text1=新数组（）；
var arr_text2=新数组（）；
var i=0；
var text2nw=“”；
$（'#a2'）。在（'input'，function（）{
arr#u text1=$（“#a1”）.val（）.split（“”）；
arr#u text2=$（“#a2”）.val（）.split（“”）；
如果（arr_text1[i]==arr_text2[i]）{
}
否则{
$（“#输出”）.val（$（“#a2”）.val（）。替换（$（“#a1”）.val（），”）；
//$（'#output'）.val（text2nw）；
}
如果（$（“#a2”）.val（）！=”）{
i++；
}
否则{
i=0；
$（'输出'）.val（''）；
}
});
});
原文如下：

在此处将文本更改为其他内容：

以下是您所做的更改：
这听起来很酷，但我的主要目标是跟踪变化。我在示例中提到，如果原始文本是
test
，您将其更改为
testing
，我希望看到添加的
ing
作为更改是的，如果a1和a2的值最初是“test”，然后您将a1的值更改为“testing”，则上述替换方法将给出精确的差异，即“ing”Ok，我尝试了一下这种方法，这是我发现的一个问题。当我运行
diff=“testing”时，替换（“test”），“”=>
ing
正如所需，但当我尝试
diff=“测试土豆炮”时。r