如何以制表符分隔格式將文本文件中的內容顯示為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獲取密鑰

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

2. 通過使用我們剛剛解析的Keys拼接線來獲取單個值。 鍵尚未修剪（它們的確具有空格）。 這使得拼接數據成為可能。

    // 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表 - 感謝@veganista將要素轉換為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);