使用 on change 监听器查看 TextArea 内部发生了什么变化

Question

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

文本更改时
从方框 a1 中获取文本并与我在方框 a2 中的内容进行比较。
如果有变化，将它们记录到输出文本区域

这是一个示例 https://codepen.io/nikolaevra/pen/eeWWbo

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

有没有办法获得使用 JQuery 或类似方法对文本区域所做的确切更改？例如，如果我在 a1 和 a2 中都有 test，然后将 a1 更改为 testing，我希望看到 ing 作为所做的更改。

编辑： 我试着尝试了一下这个方法，这是我发现的一个问题。当我按要求运行 diff = "testing".replace("test",''); => ing 时，但当我尝试 diff = "testing a potato cannon".replace("testing potato cannon",''); => testing a potato cannon 时，我只更改了一个字符。这是我想避免的大量开销。在那种情况下，我只想知道值在哪里被更改以及它被更改为什么。不是字符串的整个尾部。

Answer 1

nikolaevra，你试过用javascript的替换方法吗？例如 diff = [a1 的值].replace([a2 的值],'');

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 中的 changed/entered（新）值并将其记录到您的控制台。

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

Read the value from string a2 and use the value in a1 to replace (if exists) in string a2, hence giving you the changed value. You need not use any libraries for this. JavaScript gives you this function called 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

希望这段代码能帮到你

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

使用 on change 监听器查看 TextArea 内部发生了什么变化

See what changed inside TextArea with on change listener

javascript

diff

jquery