탭으로 구분 된 형식의 텍스트 파일에 html 테이블로 내용을 표시하는 방법

제공된 데이터는 탭으로 구분 된 값이 아니라 Ascii 테이블처럼 보입니다. 두 솔루션을 모두 추가했습니다.

아스키 테이블을위한 솔루션 - https://jsfiddle.net/libin_v/uutc6gtk/

1. 정규식을 사용하여 헤더에서 키 가져 오기

   // Get all keys from Header Row
   var lines = asciiTable.split('\n');
   var regexPattern = /\S+\s*/g;
   var headers = lines[0].match(regexPattern);
   

2. 방금 파싱 한 키를 사용하여 줄을 연결하여 개별 값을 가져옵니다. 키는 아직 다듬어지지 않았습니다 (키와 함께 공백이 있음). 이렇게하면 데이터를 연결할 수 있습니다.

   // fetch individual values (Also filter based on allowed keys)
   var allowedKeys = ["TRNO", "MODEL...", "FNAM....", "WSTA...."];
   for (i = 1; i < lines.length; i++) {
     start = 0;
     value = "";
     valueArray = [];
     headers.forEach(function(key) {
       if (allowedKeys.includes(key.trim())) {
         value = lines[i].slice(start, start + key.length);
         valueArray.push(value.trim());
       }
       start += key.length;
     });
     rows.push(valueArray);
   }
   

3. 헤더를 삽입하여 2D 배열 완성

   // Insert Header in array
   headers.forEach(function(key) {
     if (allowedKeys.includes(key.trim())) {
       valueArray.push(key.trim());
     }
   });
   rows.unshift(valueArray);
   

4. 2D 배열을 HTML 테이블로 렌더링-2D 배열을 HTML 로 변환 하는 요점에 대해 @veganista에게 감사드립니다.

   // Display 2D-array in Table
   var table = arrayToTable(rows, {
     thead: true,
     attrs: {
       class: 'table'
     }
   })
   

탭으로 구분 된 값에 대한 솔루션-https: //jsfiddle.net/libin_v/cpa8xy85/

1. 이것들을 객체로 변환하십시오. PapaParse를 사용 했습니다.

   // Convert Tab Seperated Values to Objects
   var results = Papa.parse(tabSeperatedString, config);
   console.log("Results:", results);
   

2. 우리가 좋아하는 키로 객체를 변형하십시오. (간단히 말하면 원하지 않는 키를 제거하십시오)

   // Remove unwanted keys
   var allowedKeys = ["TRNO", "MODEL...", "FNAM....", "WSTA...."];
   results.data.forEach(function(row) {
       Object.keys(row).forEach(function(key) {
          if (allowedKeys.includes(key) === false) {
             delete row[key];
          }
       });
   });
   console.log("Stripped results:", results);
   

3. 이러한 개체를 HTML로 변환

   // generate html
   var html = "<table border='1|1'>";
   Object.keys(results.data[0]).forEach(function(key) {
     html += "<th>" + key + "</th>";
   });
   
   results.data.forEach(function(row) {
     html += "<tr>";
     Object.keys(row).forEach(function(key) {
       html += "<td>" + row[key] + "</td>";
     });
     html += "</tr>";
   });
   html += "</table>";
   
   $('body').append(html);