//get text from textarea
let inputText = document.getElementById("thm").innerHTML;

//splite new line by regex
  let newLineArr = inputText.split(/\n/g)

//find length
let newLineArrLen = newLineArr.length;
//make variable
let HTMLTableOutput = "";
// looping for create new line on display
for (let i = 0; i < newLineArrLen; i++) {
  HTMLTableOutput += "<tr><td>" + newLineArr[i] + "</td></tr>" + "\n";
}
//replace comma with table tag form
HTMLTableOutput = HTMLTableOutput.replace(/<tr><td>\(([^ )]*)\)<\/td><\/tr>/g, '<a name=\"$1\">$1</a><table>');

HTMLTableOutput = HTMLTableOutput.replace(/\<a\<\/td\>\<td\>/gm, '<a ');

HTMLTableOutput = HTMLTableOutput.replace(/ /g, "</td><td>");
HTMLTableOutput = HTMLTableOutput.replace(/1/g, 'ด');
HTMLTableOutput = HTMLTableOutput.replace(/%ด/g, '1');
HTMLTableOutput = HTMLTableOutput.replace(/2/g, 'ร');
HTMLTableOutput = HTMLTableOutput.replace(/3/g, 'ม');
HTMLTableOutput = HTMLTableOutput.replace(/4/g, 'ฟ');
HTMLTableOutput = HTMLTableOutput.replace(/5/g, 'ซ');
HTMLTableOutput = HTMLTableOutput.replace(/6/g, 'ล');
HTMLTableOutput = HTMLTableOutput.replace(/7/g, 'ท');
HTMLTableOutput = HTMLTableOutput.replace(/7/g, 'ท');
HTMLTableOutput = HTMLTableOutput.replace(/8/g, 'ดํ');
HTMLTableOutput = HTMLTableOutput.replace(/9/g, 'รํ');
// HTMLTableOutput = HTMLTableOutput.replace(/\+/g, 'มํ');
HTMLTableOutput = HTMLTableOutput.replace(/\*/g, 'ํ');
HTMLTableOutput = HTMLTableOutput.replace(/\./g, 'ฺ');
HTMLTableOutput = HTMLTableOutput.replace(/\\s/g, ' ');
HTMLTableOutput = HTMLTableOutput.replace(/\_/g, ' ');
HTMLTableOutput = HTMLTableOutput.replace(/\[(.*?)\]/g, '<small>$1</small>');
//คันชักออก
HTMLTableOutput = HTMLTableOutput.replace(/([ดรมฟซลท])\{/g, '<span style=\"display: inline-block; position: relative;\">$1<sub style=\"position: absolute; bottom: -0.5em; left: 50%; transform: translateX(-50%);\"><</sub></span>');
//คันชักเข้า
HTMLTableOutput = HTMLTableOutput.replace(/([ดรมฟซลท])\}/g, '<span style=\"display: inline-block; position: relative;\">$1<sub style=\"position: absolute; bottom: -0.5em; left: 50%; transform: translateX(-50%);\">></sub></span>');
//เครื่องหมายโน้ตบวก
HTMLTableOutput = HTMLTableOutput.replace(/([ดรมฟซลท])\+/g, '<span style=\"display: inline-block; position: relative;\">$1<sub style=\"position: absolute; bottom: 0.7em; left: 50%; transform: translateX(-50%);\">+</sub></span>');
//เครื่อหมายโน้ตลบ
HTMLTableOutput = HTMLTableOutput.replace(/([ดรมฟซลท])\_/g, '<span style=\"display: inline-block; position: relative;\">$1<sub style=\"position: absolute; bottom: 0.7em; left: 50%; transform: translateX(-50%);\">-</sub></span>');
//เครื่องหมายโน้ตกลาง
HTMLTableOutput = HTMLTableOutput.replace(/([ดรมฟซลท])\o/g, '<span style=\"display: inline-block; position: relative;\">$1<sub style=\"position: absolute; bottom: 0.6em; left: 50%; transform: translateX(-50%);\"><small>º</small></sub></span>');
//เครื่องหมายพรม
HTMLTableOutput = HTMLTableOutput.replace(/([ดรมฟซลทํ])t/g, '<span style=\"display: inline-block; position: relative;\">$1<sub style=\"position: absolute; bottom: 0.7em; left: 70%; transform: translateX(-50%);\"><small>𝆱</small></sub></span>');
//ตัวเลขแสดงตำแหน่งนิ้วซอและจะเข้
HTMLTableOutput = HTMLTableOutput.replace(/([ดรมฟซลทํ])\\([๑๒๓๔๕๖๗๘๙๐ชกน])/g, '<span style=\"display: inline-block; position: relative;\">$1<sub style=\"position: absolute; bottom: 0.86em; left: 50%; transform: translateX(-50%);\"><small>$2</small></span>');
//ตัวเลขแสดงตำแหน่งนิ้วซอ เลขโรมัน
HTMLTableOutput = HTMLTableOutput.replace(/([ดรมฟซลทํ])\\(iiiii)/g, '<span style=\"display: inline-block; position: relative;\">$1<sub style=\"position: absolute; bottom: 0.86em; left: 50%; transform: translateX(-50%);\"><small>5</small></span>');
HTMLTableOutput = HTMLTableOutput.replace(/([ดรมฟซลทํ])\\(iiii)/g, '<span style=\"display: inline-block; position: relative;\">$1<sub style=\"position: absolute; bottom: 0.86em; left: 50%; transform: translateX(-50%);\"><small>4</small></span>');
HTMLTableOutput = HTMLTableOutput.replace(/([ดรมฟซลทํ])\\(iii)/g, '<span style=\"display: inline-block; position: relative;\">$1<sub style=\"position: absolute; bottom: 0.86em; left: 50%; transform: translateX(-50%);\"><small>3</small></span>');
HTMLTableOutput = HTMLTableOutput.replace(/([ดรมฟซลทํ])\\(ii)/g, '<span style=\"display: inline-block; position: relative;\">$1<sub style=\"position: absolute; bottom: 0.86em; left: 50%; transform: translateX(-50%);\"><small>2</small></span>');
HTMLTableOutput = HTMLTableOutput.replace(/([ดรมฟซลทํ])\\(i)/g, '<span style=\"display: inline-block; position: relative;\">$1<sub style=\"position: absolute; bottom: 0.86em; left: 50%; transform: translateX(-50%);\"><small>1</small></span>');
HTMLTableOutput = HTMLTableOutput.replace(/([ดรมฟซลทํ])\\(0)/g, '<span style=\"display: inline-block; position: relative;\">$1<sub style=\"position: absolute; bottom: 0.86em; left: 50%; transform: translateX(-50%);\"><small>0</small></span>');
//แสดงสายลวดจะเข้+มือซ้ายขิม
HTMLTableOutput = HTMLTableOutput.replace(/([ดรมฟซลทํ])\\([+])/g, '<span style=\"display: inline-block; position: relative;\">$1<sub style=\"position: absolute; bottom: -0.5em; left: 50%; transform: translateX(-50%);\"><small>$2</small></span>');


//แปลงเลขไทยเป็นอาราบิก
HTMLTableOutput = HTMLTableOutput.replace(/๑/g, '<span style="font-size:7px">1</span>');
HTMLTableOutput = HTMLTableOutput.replace(/๒/g, '<span style="font-size:7px">2</span>');
HTMLTableOutput = HTMLTableOutput.replace(/๓/g, '<span style="font-size:7px">3</span>');
HTMLTableOutput = HTMLTableOutput.replace(/๔/g, '<span style="font-size:7px">4</span>');
HTMLTableOutput = HTMLTableOutput.replace(/๕/g, '<span style="font-size:7px">5</span>');
HTMLTableOutput = HTMLTableOutput.replace(/๖/g, '<span style="font-size:7px">6</span>');
HTMLTableOutput = HTMLTableOutput.replace(/๗/g, '<span style="font-size:7px">7</span>');
HTMLTableOutput = HTMLTableOutput.replace(/๘/g, '<span style="font-size:7px">8</span>');
HTMLTableOutput = HTMLTableOutput.replace(/๙/g, '<span style="font-size:7px">9</span>');
HTMLTableOutput = HTMLTableOutput.replace(/๐/g, '<span style="font-size:7px">0</span>');
//เครื่องหมายดีดเข้า
HTMLTableOutput = HTMLTableOutput.replace(/([ดรมฟซลทํ])v/g, '<span style=\"display: inline-block; position: relative;\">$1<sub style=\"position: absolute; bottom: 0.3em; left: 50%; transform: translateX(-30%);\">𝆫</span>');
//เครื่องหมายดีดออก
HTMLTableOutput = HTMLTableOutput.replace(/([ดรมฟซลทํ๑๒๓๔๕๖๗๘๙๐])\^/g, '<span style=\"display: inline-block; position: relative;\">$1<sub style=\"position: absolute; bottom: 0.9em; left: 40%; transform: translateX(-5%);rotate: -180deg;\">𝆫</span>');
//แปลงคำ next เป็น tag page เพื่อสร้าง page break สาหรับการพิมพ์
HTMLTableOutput = HTMLTableOutput.replace(/<tr><td>next<\/td><\/tr>/gm, "<page>")
//การพิมพ์เลข
HTMLTableOutput = HTMLTableOutput.replace(/%ด/g, '1');
HTMLTableOutput = HTMLTableOutput.replace(/%ร/g, '2');
HTMLTableOutput = HTMLTableOutput.replace(/%ม/g, '3');
HTMLTableOutput = HTMLTableOutput.replace(/%ฟ/g, '4');
HTMLTableOutput = HTMLTableOutput.replace(/%ซ/g, '5');
HTMLTableOutput = HTMLTableOutput.replace(/%ล/g, '6');
HTMLTableOutput = HTMLTableOutput.replace(/%ท/g, '7');
HTMLTableOutput = HTMLTableOutput.replace(/%8/g, '8');
HTMLTableOutput = HTMLTableOutput.replace(/%9/g, '9');
HTMLTableOutput = HTMLTableOutput.replace(/%0/g, '0');
HTMLTableOutput = HTMLTableOutput.replace(/\/\//g, 'END');
  // HTMLTableOutput = HTMLTableOutput.replace(/<tr><td>END<\/td><\/tr>/g, '<\/table><div style=\"text-align: right\;font-size:10px">กลับต้น<\/div>');
HTMLTableOutput = HTMLTableOutput.replace(/<tr><td>END<\/td><\/tr>/g, '<tr><td style=\"border-bottom: hidden;border-left: hidden;border-right: hidden\"> </td><td style=\"border-bottom: hidden;border-left: hidden;border-right: hidden\"> </td><td style=\"border-bottom: hidden;border-left: hidden;border-right: hidden\"> </td><td style=\"border-bottom: hidden;border-left: hidden;border-right: hidden\"> </td><td style=\"border-bottom: hidden;border-left: hidden;border-right: hidden\"> </td><td style=\"border-bottom: hidden;border-left: hidden;border-right: hidden\"> </td><td style=\"border-bottom: hidden;border-left: hidden;border-right: hidden\"> </td><td style=\"border-bottom: hidden;border-left: hidden;border-right: hidden\"><small>กลับต้น</small></td></tr>');
// HTMLTableOutput = HTMLTableOutput.replace(/\/\//g, '</table><span style=\"text-align: right\">กลับต้น<\/span>');

HTMLTableOutput = HTMLTableOutput.replace(/\<a\<\/td\>\<td\>/gm, '<a ');

HTMLTableOutput = HTMLTableOutput.replace(/<tr><td><\/td><\/tr>/g, '<\/table><br><table>');
console.log('HTMLTABLEOUTPUT', HTMLTableOutput)

if (HTMLTableOutput !== "<tr><td></td></tr>\n") {
  document.getElementById('thm').innerHTML =
    "<table style=&#34width:100%&#34>\n" + HTMLTableOutput + "</table>";
  }