JSFiddle - React, Tailwind, and code Playground

by disfated

HTML

<div id="actions"></div>
<textarea id="in"></textarea>
<textarea id="out"></textarea>

CSS

* { padding: 0; margin: 0; }
body { } 
textarea { border: 1px solid #CCC; padding: 5px;  box-sizing: border-box; font-family: monospace; }
#in { position: absolute; top: 6%; left: 0; width: 50%; height: 94%; }
#out { position: absolute; top: 6%; right: 0; width: 50%; height: 94%; }
#actions { position: absolute; top: 0; left: 0; width: 100%; height: 6%; }
button { padding: 4px 10px; text-shadow: 1px 1px 1px #FFF; }

JavaScript

$(document).ready(function() {
    $('#in').focus();
    var acts = {
        'mods-table': function(src) {
            return src
                .replace('<table id="table-inf">', '<table class="mods">')
                .replace(/<(t[dhr])\s*(?:(?:class|width|style)=['"]?[^"']+['"]?\s*)*>/gi, '<$1>')
                .replace(/<th><em>([^<]*)\s*<\/em>\s*<\/th>/gi, '<th>$1</th>')
                .replace(/<\/th>\s+<th>/gi, '</th>\n<th>')
                .replace(/^\s+/gm, '')
                .replace(/\s+$/gm, '')
                .replace('<tbody>\n<tr>\n<th>', '<thead>\n<tr>\n<th>')
                .replace('</th>\n</tr>\n<tr>', '</th>\n</tr>\n</thead>\n<tbody>\n<tr>')
                .replace(/^(<\/?(thead|tbody)>)/gm, '  $1')
                .replace(/^(<\/?(tr)>)/gm, '    $1')
                .replace(/^(<\/?(td|th)>)/gm, '      $1')
                .replace(/\s+(<\/(?:td|th)>)/gm, '$1')
                .replace(/<(t[dh])>(?:<br\s*\/?>|\s+)<\/\1>/gm, '<$1>&nbsp;</$1>')
                .replace(/<br\s*\/?>((?:<\/?\w+>)*)<\/(t[dh])>/gi, '$1</$2>')
                .replace(/<td><strong>([\s\S]*?)<\/strong><\/td>/gi, '<th>$1</th>')
                
         
                            
        }            
    };
    $.each(acts, function(name, action) {
        $('#actions').append($('<button>').text(name).click(function() {
            console.log(name);
            $('#out').val(action.call(null, $('#in').val()));
        }));
    });
});