JSFiddle - React, Tailwind, and code Playground

by disfated

HTML

<div id="actions">
    <button>go</button> prodid: <input id="prodid" type="number" value="50"/>
</div>
<textarea id="out"></textarea>
<textarea id="in">&lt;table class="mods"&gt;
  &lt;thead&gt;
    &lt;tr&gt;
      &lt;th&gt;Наименование&lt;/th&gt;
      &lt;th&gt;Обозн&lt;/th&gt;
      &lt;th&gt;Ед изм&lt;/th&gt;
      &lt;th&gt;Значение&lt;/th&gt;
    &lt;/tr&gt;
  &lt;/thead&gt;
  &lt;tbody&gt;
    &lt;tr&gt;
      &lt;th&gt;Грузоподъемность&lt;/th&gt;
      &lt;td&gt;&nbsp;&lt;/td&gt;
      &lt;td&gt;кг&lt;/td&gt;
      &lt;td&gt;2000&lt;/td&gt;
    &lt;/tr&gt;
    &lt;tr&gt;
      &lt;th&gt;Центр загрузки&lt;/th&gt;
      &lt;td&gt;c&lt;/td&gt;
      &lt;td&gt;мм&lt;/td&gt;
      &lt;td&gt;750&lt;/td&gt;
    &lt;/tr&gt;
    &lt;tr&gt;
      &lt;th&gt;Высота подъема&lt;/th&gt;
      &lt;td&gt;h3&lt;/td&gt;
      &lt;td&gt;мм&lt;/td&gt;
      &lt;td&gt;200&lt;/td&gt;
    &lt;/tr&gt;
    &lt;tr&gt;
      &lt;th&gt;Высота подъема (min)&lt;/th&gt;
      &lt;td&gt;h13&lt;/td&gt;
      &lt;td&gt;мм&lt;/td&gt;
      &lt;td&gt;85&lt;/td&gt;
    &lt;/tr&gt;
    &lt;tr&gt;
      &lt;th&gt;Дорожный просвет&lt;/th&gt;
      &lt;td&gt;m1&lt;/td&gt;
      &lt;td&gt;мм&lt;/td&gt;
      &lt;td&gt;40&lt;/td&gt;
    &lt;/tr&gt;
    &lt;tr&gt;
      &lt;th&gt;Длина вил&lt;/th&gt;
      &lt;td&gt;l&lt;/td&gt;
      &lt;td&gt;мм&lt;/td&gt;
      &lt;td&gt;1500&lt;/td&gt;
    &lt;/tr&gt;
    &lt;tr&gt;
      &lt;th&gt;Ширина вил&lt;/th&gt;
      &lt;td&gt;b1&lt;/td&gt;
      &lt;td&gt;мм&lt;/td&gt;
      &lt;td&gt;540&lt;/td&gt;
    &lt;/tr&gt;
    &lt;tr&gt;
      &lt;th&gt;Расстояние между вилами&lt;/th&gt;
      &lt;td&gt;b3&lt;/td&gt;
      &lt;td&gt;мм&lt;/td&gt;
      &lt;td&gt;220&lt;/td&gt;
    &lt;/tr&gt;
    &lt;tr&gt;
      &lt;th&gt;Ширина вилы&lt;/th&gt;
      &lt;td&gt;e&lt;/td&gt;
      &lt;td&gt;мм&lt;/td&gt;
      &lt;td&gt;160&lt;/td&gt;
    &lt;/tr&gt;
    &lt;tr&gt;
      &lt;th&gt;Высота вилы&lt;/th&gt;
      &lt;td&gt;s&lt;/td&gt;
     ...

CSS

body, html { height: 100%; }
body { margin:0; padding:8px; box-sizing: border-box; }
div#actions { height: 8%; box-sizing: border-box; }
textarea { display: block; box-sizing: border-box; width: 100%; min-height: 80px; border: 1px inset; border-radius: 2px; padding: 4px 6px; }
#in { height: 26%; }
#out { height: 66%; }

JavaScript

function translate(html, prodid) {
    
    function str2bin(str) {
        function hex(d) {
            ret.push((d < 16 ? '0' : '') + d.toString(16));
        }
        for (var ret = [], i = 0, l = str.length; i < l; i++) {
            var c = str.charCodeAt(i);
            if (0xD800 <= c && c <= 0xDBFF) {
                c = ((c - 0xD800) * 0x400) + (str.charCodeAt(i + 1) - 0xDC00) + 0x10000;
                i++;
            }
            if (c < 128) { // 1 byte
                hex(c);
            } else if (c >= 128 && c < 2048) { // 2 bytes
                hex((c >> 6) | 0xC0);
                hex((c & 0x3F) | 0x80);
            } else if (c >= 2048 && c < 65536) { // 3 bytes
                hex((c >> 12) | 0xE0);
                hex(((c >> 6) & 0x3F) | 0x80);
                hex((c & 0x3F) | 0x80);
            } else if (c >= 65536) { // 4 bytes
                hex((c >> 18) | 0xF0);
                hex(((c >> 12) & 0x3F) | 0x80);
                hex(((c >> 6) & 0x3F) | 0x80);
                hex((c & 0x3F) | 0x80);
            }
        }
        return '0x' + ret.join('');
    }
    
    var attrs = {
        'Грузоподъемность': '12',
        'Центр загрузки': '13',
        'Высота подъема': '14',
        'Высота подъема (min)': '15',
        'Дорожный просвет': '16',
        'Длина вил': '17',
        'Ширина вил': '18',
        'Расстояние между вилами': '19',
        'Ширина вилы': '20',
        'Высота вилы': '21',
        'Общая длина': '22',
        'Общая ширина': '23',
        'Высота ручки': '24',
        'Размер передних колес': '25',
        'Размер задних колес': '30',
        'Число колес спереди/сзади': '26',
        'Радиус поворота': '27',
        'Ширина прохода с паллетой': '28',
        'Рабочая температура': '29',
        'Вес': '31',
    };
    
    var t = $(html);
    var rows = t.find('thead').lenght ? t.find('tbody tr') : t.find('tr:gt(0)');
    return 'INSERT INTO `product_attribute` (`product_id`, `attribute_id`,...