2-way Difference Checker

line seperator based difference checker. just input left and right line with text and check difference!

by Ukjin Yang

HTML

<textarea id="inleft" cols="30" rows="10"></textarea>
<textarea id="inright" cols="30" rows="10"></textarea>
<textarea id="outleft" cols="30" rows="10" readonly></textarea>
<textarea id="outright" cols="30" rows="10" readonly></textarea>

CSS

html,body{width:100%;height:100%;margin:0;}
textarea{width:48%;height:48%;}
#outleft,#outright{background-color:#eee;}

JavaScript

const $id = id => document.getElementById(id);
const inleft = $id('inleft'), inright = $id('inright');
const outleft = $id('outleft'),outright = $id('outright');
function diff() {
  const leftk = {}, rightk = {};
  let cl = 0, cr = 0;
  for(let l of inleft.value.split(/\n+/))
    leftk[l] = ++cl;
  for(let l of inright.value.split(/\n+/))
    rightk[l] = ++cr;
  const lefta = Object.keys(leftk), righta = Object.keys(rightk);
  outright.value = righta.reduce((a,k)=>{
  	if(!~lefta.indexOf(k)) a.push(k);
    return a;
  },[]).join('\n');
  outleft.value = lefta.reduce((a,k)=>{
  	if(!~righta.indexOf(k)) a.push(k);
    return a;
  },[]).join('\n');
}
inleft.addEventListener('change', diff);
inright.addEventListener('change', diff);