JSFiddle - React, Tailwind, and code Playground

by senica

HTML

<textarea></textarea>
<div id="output"></div>

CSS

textarea{
    width:100%;
    height:300px;
}

JavaScript

/*Guestbook*/
$("textarea").on("change", function(){
   var output = "";
   var i = 0;
   var base = $(this).val();
   var lines = base.split(/\n/g);
    $.each(lines, function(index, line){
        try{
           var blob = line.split("VALUES (")[1].split(",");
           var forename = $.trim(blob[1].replace(/'/g, ''));
           var surname = $.trim(blob[2].replace(/'/g, ''));
           var address_1 = $.trim(blob[3].replace(/'/g, ''));
           var address_2 = $.trim(blob[4].replace(/'/g, ''));
           var city = $.trim(blob[5].replace(/'/g, ''));
           var state = $.trim(blob[6].replace(/'/g, ''));
           var zip = $.trim(blob[7].replace(/'/g, ''));
           var phone = $.trim(blob[8].replace(/'/g, '')); 
           var email = $.trim(blob[9].replace(/'/g, ''));
           var notes = $.trim(blob[10].replace(/'/g, ''));
           var facebook = $.trim(blob[11].replace(/'/g, ''));
           var twitter = $.trim(blob[12].replace(/'/g, ''));
           var birthday = $.trim(blob[13].replace(/'/g, ''));
               birthday = birthday != "NULL" ? birthday : '';
           var anniversary = $.trim(blob[14].replace(/'/g, ''));
            anniversary = anniversary != "NULL" ? anniversary : '';            
           var spouse = $.trim(blob[15].replace(/'/g, ''));
           var spouse_birthday = $.trim(blob[16].replace(/'/g, ''))
               spouse_birthday = spouse_birthday != "NULL" ? spouse_birthday : '';
           var kids= $.trim(blob[17].replace(/'/g, ''));                
            output += 'guests['+i+'] = {id:'+(i+1)+', forename:"'+forename+'", surname:"'+surname+'", address_1:"'+address_1+'", address_2:"'+address_2+'", city:"'+city+'", state:"'+state+'", zip:"'+zip+'", phone:"'+phone+'", email:"'+email+'", attributes:[], facebook:"'+facebook+'", twitter:"'+twitter+'", birthday:"'+birthday+'", anniversary:"'+anniversary+'", spouse:"'+spouse+'", spouse_birthday:"'+spouse_birthday+'", kids:"'+kids+'", notes:""};<br />';
     ...