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">

<style> 
*{
	font-family: Georgia;
}

#HeaderTitle{
  text-align:right;
  font-size:11px;
}
#HeaderSubTitle{
  margin-bottom:2px;
  margin-top:0px
}

.same{
  background-color:white;
  height:20px;
}
.delete{
  background-color:#FF6666;
  height:20px;
}
.add{
  background-color:#66FFFF;
  height:20px;
}
.change{
  background-color:#66FF66;
  height:20px;
}
.labels div{
  float:right;
  width:70px;
  border: solid 1px grey;
  margin-left:10px;
  text-align:center;
  color:grey
}
</style> 
</head> 
<body> 

<div id="HeaderTitle">Text Difference in JavaScript <span style='color:#aaa;font-weight:bold;font-style:italic'>Online</span> 1.0 Copyright (c) 2010 Vladimir Bodurov &nbsp; <a href="http://blog.bodurov.com/Implementing-Longest-Common-Subsequence-Algorithm-in-JavaScript-Text-Diff/">about this tool</a></div>
<h3 id="HeaderSubTitle">Find Text Difference</h3>
<div>Enter your texts in the two boxes: <span style='color:#777;font-size:10px'>(Your code will NOT be posted to a server, the program executes on the client)</span></div>

<div class="labels">
  <div class="same">same</div>
  <div class="delete">deleted</div>
  <div class="add">added</div>
  <div class="change">changed</div>
</div>
<input id="ParseBtn" type="button" value="Parse" onClick="parse()" />
<input id="EditBtn" type="button" value="Edit" onClick="edit()" disabled="true" />


<table border="0" cellpadding="5" cellspacing="0" style="width:100%;height:700px">
  <tr>
    <td style="width:50%"...

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();
  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) ? "<div class=\"add\">" + nextDivHtml(dp.get_right(), x++) + "</div>" 
                          : "<div class=\"change\">" + nextDivHtml(dp.get_right(), x++) + "</div>";
    sb.push(line);
  }
  $id("RightArea").style.display = "none";
  $id("RightPreview").style.display = "block";
  $id("RightPreview").innerHTML = sb.join('');
  $id("ParseBtn").disabled = true;
  $id("EditBtn").disabled = false;
}
function edit(){
  $id("ParseBtn").disabled = false;
  $id("EditBtn").disabled = true;
  $id("LeftArea").style.display = "block";
  $id("LeftPreview").innerHTML = "";
 ...