JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://google-diff-match-patch.googlecode.com/svn/trunk/javascript/diff_match_patch.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/diff_match_patch/20121119/diff_match_patch.js"></script>
<div id="left">
    <div class="item-section" id="details">
        
        
        
        <input type="hidden" value="51" name="itemtypeid" id="itemtypeid">
        <input type="hidden" value="Seating" name="itemtypename" id="itemtypename">
        <input type="hidden" value="false" name="edit" id="edit">
        
        
        
        
        <table width="100%" border="0">
            <tbody><tr>
                <td class="overview-left">
                    
                    <table width="100%" border="0" class="fields">
                        
                        
                        
                        
                        
                        
                        
                        <tbody><tr id="item-code">
                            <td class="field">Code</td>
                            <td class="value">sofa1</td>
                            </tr>
                            
                            <tr id="item-description">
                                <td class="field">Description</td>
                                <td class="value">DWR Loooonge What New</td>
                            </tr>
                            
                            <tr id="item-cost">
                                <td class="field">Cost</td>
                                <td class="value">$650.55</td>
                            </tr>
                            
                            <tr id="item-markup">
                                <td class="field">Markup</td>
                                <td class="value">$1.00</td>
                            </tr>
                            
                            <tr id="item-unit-type">
                                <td...

JavaScript

String.prototype.regexIndexOf = function(regex, startpos) {
    var indexOf = this.substring(startpos || 0).search(regex);
    return (indexOf >= 0) ? (indexOf + (startpos || 0)) : indexOf;
}

$(document).ready(function() {

    var dmp = new diff_match_patch();
    var text1 = $('#left').html().replace(/\s+/g, " "); // clean whitespace!
    var text2 = $('#right').html().replace(/\s+/g, " ");

    var current_unicode = parseInt('2000', 16);
    var charmap = {};

    var replaceFirstTag = function(str, code) {
        var nu = code + 1;
        while (charmap.hasOwnProperty(String.fromCharCode(code.toString(16)))) code++;
        var char = String.fromCharCode(code.toString(16));
        var sp = str.search(/</);
        var ep = str.search(/>/);
        var tag = str.slice(sp, ep + 1);
        return [str.replace(/<.*?>/, char), char, tag];
    }

    while (text1.regexIndexOf(/<.*?>/, 0) > 0) {
        var replaced = replaceFirstTag(text1, current_unicode);
        text1 = replaced[0];
        text2 = text2.replace(replaced[2], replaced[1]); // also make the same substitution in the second text!
        charmap[replaced[1]] = replaced[2];
        current_unicode++;
    }

    while (text2.regexIndexOf(/<.*?>/, 0) > 0) {
        var replaced = replaceFirstTag(text2, current_unicode);
        text2 = replaced[0];
        charmap[replaced[1]] = replaced[2];
        current_unicode++;
    }


    var d = dmp.diff_main(text1, text2, false);
    // var d = dmp.diff_lineMode_(text1, text2);
    // dmp.diff_cleanupEfficiency(d);
    dmp.diff_cleanupSemantic(d);

    var rendered = dmp.diff_prettyHtml(d);
    // console.log(rendered);

    // now loop over the charmap keys and replace the results with each one...
    for (char in charmap) {
        var re = new RegExp(char, "g");
        rendered = rendered.replace(re, charmap[char]);
    }

    $('#out').html(rendered);


});