JSFiddle - React, Tailwind, and code Playground

Find differences between text

by skibulk

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<table>
  <tr>
    <td><textarea id="in1"></textarea></td>
    <td id="out1"></td>
  </tr>
  <tr>
    <td><textarea id="in2"></textarea></td>
    <td id="out2"></td>
  </tr>
</table>

CSS

* {
  box-sizing: border-box;
}

html,
body {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
}

table {
  width: 100%;
  height: 100%;
  max-height: 100%;
}

td {
  width: 50%;
  height: 50%;
}

textarea {
  width: 100%;
  height: 100%;
}

span {
  background: lightblue;
}

JavaScript

console.clear();

var ins = $("#in1, #in2");
var in1 = $("#in1");
var in2 = $("#in2");
var out1 = $("#out1");
var out2 = $("#out2");

ins.on("change keyup", function(event) {
  var words1 = getWords(in1.val());
  var words2 = getWords(in2.val());

  compare(words1, words2);
});

function getWords(text) {
  return text
    .replace(/-[\r\n]/mg, "")
    .replace(/[^a-zA-Z]/mg, " ")
    .replace(/\s+/mg, " ")
    .split(" ");
}

function compare(a, b) {

  var a_key = Array(a.length).fill(false);
  var b_key = Array(b.length).fill(false);

  for (var i = 0; i < a.length; i++) {
    for (var j = 0; j < b.length; j++) {
      if( b_key[j] ) continue;
      
      if (a[i] == b[j]) {
        a_key[i] = true;
        b_key[j] = true;
        i++;
        j = -1;
      }
    }
  }
  
  renderDiff( a, a_key, out1 );
  renderDiff( b, b_key, out2 );
}

function renderDiff( a, a_key, out1 ) {
	out1.html("");
  
  for (var i = 0; i < a.length; i++) {
  
  	if( a_key[i] ) {
    	out1.append( a[i] + " " );
    } else {
    	out1.append( "<span>" + a[i] + "</span>" + " " );
    }
  }
}