JSFiddle - React, Tailwind, and code Playground

by pierian_design

HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
  <title>Find Text Difference - Longest Common Subsequence Algorithm in JavaScript</title>
  <meta name="description" content="Text Difference, Longest Common Subsequence Algorithm in JavaScript - Text Diff">
  <meta name="keywords" content="Text Difference, Longest Common Subsequence Algorithm, JavaScript, Text Diff, Diff, LCS, Matrix">
<script type="text/javascript">






























var RESULT = {
  Same: 0,
  Deleted: 1,
  Added: 2,
  Changed: 3
}

var MAX_ROWS_ALLOWED = 500;
function $id(id){ return document.getElementById(id); }
function parse(){

  var leftText = $id("LeftArea").value;
  var rightText = $id("RightArea").value;

  var dp = new DiffParser(leftText, rightText);

  dp.parse();
  generateColoredLines(dp);
}
function generateColoredLines(dp){
  var sb = [];
  var resArr = dp.get_results();
  
  console.log(resArr);
  
  var x = 0; 

  for(var i = 0; i < resArr.length; i++){
    var line = (resArr[i] == RESULT.Same) ? "<div class=\"same\">" + nextDivHtml(dp.get_left(), x++) + "</div>": 
                    (resArr[i] == RESULT.Deleted) ? "<div class=\"delete\">" + nextDivHtml(dp.get_left(), x++) + "</div>" : 
                        (resArr[i] == RESULT.Added) ? "<div class=\"add\">&nbsp;</div>" 
                          : "<div class=\"change\">" + nextDivHtml(dp.get_left(), x++) + "</div>";
    sb.push(line);
  }
  $id("LeftArea").style.display = "none";
  $id("LeftPreview").style.display = "block";
  $id("LeftPreview").innerHTML = sb.join('');
  sb = [];
  x = 0;
  for(var j = 0; j < resArr.length; j++){
    var line = (resArr[j] == RESULT.Same) ? "<div class=\"same\">" + nextDivHtml(dp.get_right(), x++) + "</div>": 
                    (resArr[j] == RESULT.Deleted) ? "<div class=\"delete\">&nbsp;</div>": 
                        (resArr[j] == RESULT.Added)...