JSFiddle - React, Tailwind, and code Playground

by ajai jothi

HTML

<input type="file" name="" id="" onchange="handleFile(event)">
<div id="output"></div>
<script src="http://oss.sheetjs.com/js-xlsx/shim.js"></script>
<script src="http://oss.sheetjs.com/js-xlsx/jszip.js"></script>
<script src="http://oss.sheetjs.com/js-xlsx/xlsx.js"></script>
<script src="http://oss.sheetjs.com/js-xlsx/ods.js"></script>
<script src="https://neil.fraser.name/software/diff_match_patch/svn/trunk/javascript/diff_match_patch.js"></script>

<script src="//prettydiff.com/lib/global.js" type="application/javascript"></script>
        <script src="//prettydiff.com/lib/language.js" type="application/javascript"></script>
        <script src="//prettydiff.com/lib/options.js" type="application/javascript"></script>
        <script src="//prettydiff.com/lib/finalFile.js" type="application/javascript"></script>
        <script src="//prettydiff.com/lib/safeSort.js" type="application/javascript"></script>
        <script src="//prettydiff.com/ace/ace.js" type="application/javascript"></script>
        <script src="//prettydiff.com/api/dom.js" type="application/javascript"></script>
        <script src="//prettydiff.com/lib/csspretty.js" type="application/javascript"></script>
        <script src="//prettydiff.com/lib/csvpretty.js" type="application/javascript"></script>
        <script src="//prettydiff.com/lib/diffview.js" type="application/javascript"></script>
        <script src="//prettydiff.com/lib/jspretty.js" type="application/javascript"></script>
        <script src="//prettydiff.com/lib/markuppretty.js" type="application/javascript"></script>
        <script src="//prettydiff.com/prettydiff.js" type="application/javascript"></script>

CSS

.diff .texttitle, .diff .count, .diff .author{
  display:none;
}
.diff{
  margin-bottom:5px;
}
.diff ol{
  list-style:none;
  margin:0;
  padding:0;
  counter-reset: _counter;
}
.diff li {
	counter-increment: _counter;
}
.diff li:before {
	content: counter(_counter);
	display:inline-block;
  min-width:10px;
  padding:5px;
  background:#999;
  color:white;
  text-align:left;
  margin-right:5px;
  font-size:8px;
  border:1px solid #666;
  border-bottom:0px;
}

.diff-left,.diff-right{
  float:left;
  display: block;
  width: 50%;
  box-sizing: border-box;
  overflow: auto;
  border: 1px solid #333;
  border-top-color: #2d2d2d;
  border-bottom-color: #2d2d2d;
  max-height: 200px;
}
em{
  background: lightyellow;
  border:1px solid orange;
}

.sheet {
  margin: 5px;
  font-family: arial;
  font-size: 11px;
  box-sizing: border-box;
}

.sheet-head {
  font-size: 12px;
  font-weight: bold;
  background: lightblue;
  padding: 5px 10px;
  border-bottom: 1px solid #127292;
  cursor: pointer;
}

.sheet-head:before {
  content: '-';
  display: inline-block;
  margin-right: 5px;
  color: #127292;
}

._collapsed.sheet-head:before {
  content: '+';
}

.diff:after {
  clear: both;
  display: block;
  content:'';
}

.col-head {
  font-weight: bold;
  padding: 5px 10px;
  text-align: center;
  background: #ddd;
  box-shadow:#ddd 0 1px 3px;
  border-bottom: 1px solid #999;
}

JavaScript

function ExcelDiffParser(binary) {
  var self = this;
  var COLUMNS = 0;

  this._wb = XLSX.read(binary, {
    type: 'binary'
  });

  this._sheets = this.workBookParser(this._wb);

  this.getSheets = function() {
    return self._sheets;
  };

  this.getSheet = function(sheetName) {
    return self._sheets[sheetName];
  };

  this.getSheetColumns = function(sheetName) {
    return self._sheets[sheetName][COLUMNS];
  };

  this.getSheetRows = function(sheetName) {
    return self._sheets[sheetName] instanceof Array ?
      self._sheets[sheetName].slice(1) : [];
  };
}

ExcelDiffParser.prototype.workBookParser = function(wb) {
  var sheets = {};
  var sheetIndex = 0;
  for (var s in wb.Sheets) {
    var _sheet = wb.Sheets[s];
    if (_sheet['!ref']) {
      var _range = _sheet['!ref'].split(/\:/g);
      var colFrom = _range[0].replace(/[0-9]/g, '').charCodeAt(0),
        colTo = _range[1].replace(/[0-9]/g, '').charCodeAt(0),
        rowFrom = +(_range[0].replace(/[^\d]/g, '')),
        rowTo = +(_range[1].replace(/[^\d]/g, ''));

      sheets[s] = [];
      var _columns = [];
      for (var j = rowFrom; j <= rowTo; j++) {
        var _rows = [];
        var _row = {};
        for (var i = colFrom; i <= colTo; i++) {
          var _colKey = String.fromCharCode(i);
          var _col = _sheet[_colKey + j] ? _sheet[_colKey + j].v : '';
          if (j === 1) {
            _columns.push(_col);
          } else {
            _row[_columns[i - colFrom]] = _col;
          }
        }
        _rows.push(_row);
        sheets[s].push(_row);
        sheets[s].sheetName = s;
      }
      sheets[sheetIndex] = sheets[s];
      sheetIndex++;
    }
  }

  sheets.length = sheetIndex;

  return sheets;
};

ExcelDiffParser.prototype.diffNow = function(str1, str2) {
  var self = this;
  var reg = /\s*(<[^>]*>)/g;
  var sArr1 = str1.split(reg).filter(function(_s) {
    return _s;
  });
  var sArr2 = str2.split(reg).filter(function(_s) {
    return _s;
  });;

  var final = '';

 ...