javascript - 如何将制表符分隔格式的文本文件的内容显示为 html 表格

Question

我有一个文本文件，其中的数据看起来像表格，因为它采用制表符分隔格式。

如何以 html 表格的形式仅显示文本文件中的几个值。

这就是我的文本文件的样子:

@   RUNNO   TRNO R# O# C# CR MODEL... TNAM..................... FNAM.... WSTA.... SOIL_ID...    SDAT    PDAT    EDAT    ADAT    MDAT    HDAT  DWAP    CWAM    HWAM    HWAH    BWAH  PWAM    HWUM  H#AM    H#UM  HIAM  LAIX  IR#M  IRCM  PRCM  ETCM  EPCM  ESCM  ROCM  DRCM  SWXM  NI#M  NICM  NFXM  NUCM  NLCM  NIAM  CNAM  GNAM  PI#M  PICM  PUPC  SPAM  KI#M  KICM  KUPC  SKAM  RECM  ONTAM   ONAM  OPTAM   OPAM   OCTAM    OCAM    DMPPM    DMPEM    DMPTM    DMPIM     YPPM     YPEM     YPTM     YPIM    DPNAM    DPNUM    YPNAM    YPNUM  NDCH TMAXA TMINA SRADA DAYLA   CO2A   PRCP   ETCP   ESCP   EPCP
        1      1  1  0  0 WH CSCER046 DRYLAND  - 0 KG N/HA      KSAS0001 KSAS8101 IBWH980018 1981279 1981289 1981294 1982141 1982174 1982174    46    7615    2848    2848       0  3308  0.0250 11371    22.0 0.374   2.0     0     0   600   422   188   234    12   115   141     1     0   -99    76   127    54    67    54   -99   -99   -99   -99   -99   -99   -99   -99     0   7842   7841      0      0   78645   78603     13.1     18.8     40.5      -99      4.9      7.0     15.1      -99      -99    100.6      -99     37.6   245  13.1   1.2  12.4  12.6  340.7  579.8  405.2    -99    -99
        2      2  1  0  0 WH CSCER046 DRYLAND  - 60 KG N/HA     KSAS0001 KSAS8101 IBWH980018 1981279 1981289 1981294 1982141 1982174 1982174    46   10018    4150    4150       0  4656  0.0288 14411    23.6 0.414   2.5     0     0   600   431   212   219    12   110   139     1    60   -99   105   132    78    94    79   -99   -99   -99   -99   -99   -99   -99   -99     0   7842   7841      0      0   78652   78608     17.3     24.2     47.3      -99      7.2     10.0     19.6      -99    167.0     95.6     69.2     39.6   245  13.1   1.2  12.4  12.6  340.7  579.8  413.4    -99    -99
        3      3  1  0  0 WH CSCER046 DRYLAND  - 180 KG N/HA SP KSAS0001 KSAS8101 

我只想在 html 表格中显示 TRNO、Model、FNAM、WSTA。

Answer 1

提供的数据看起来像是一个 Ascii 表，而不是制表符分隔的值。我已经添加了这两种解决方案。

Ascii 表的解决方案 - https://jsfiddle.net/libin_v/uutc6gtk/

1. 使用正则表达式从 header 获取 key

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

2. 通过使用我们刚刚解析的键拼接行来获取单个值。键尚未被 trim (它们确实有空格)。这使得拼接数据成为可能。

   // 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. 通过插入标题来完成二维数组

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

4. 将 2D 数组渲染为 HTML 表格 - 感谢@veganista gist to convert 2D array to HTML

   // 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);