JSFiddle - React, Tailwind, and code Playground

by mikecmpbll

HTML

<textarea class='one'></textarea>
<textarea class='two'></textarea>

JavaScript

$('textarea.one').on('keyup', function() {
  var text1 = $(this).val()
  var text2 = $('textarea.two').val()
 
  if (text1.length > text2.length) {
    var diff = textDiff(text1, text2, (text1.length - text2.length))
    
    alert("'" + diff[1] + "', at index: " + diff[0] + ", +added")
  } else if (text2.length > text1.length) {
    var diff = textDiff(text2, text1, (text2.length - text1.length))
    
    alert("'" + diff[1] + "', at index: " + diff[0] + ", -removed")
  } else {
    var diff = ""
    
    alert("no difference")
  }
  
  $('textarea.two').val(text1)
})

function textDiff(text1, text2, length) {
  for (var i = 0; i < text1.length; i++) {
    if (text2[i] == undefined || text1[i] != text2[i]) {
      return [i, text1.substring(i, i + length)]
    }
  }
}