如何將顯示爲製表符分隔格式的文本文件的內容顯示爲html表格

我有一個文本文件，其中數據看起來像表格，因爲它是製表符分隔的格式。如何將顯示爲製表符分隔格式的文本文件的內容顯示爲html表格

如何以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

我只是想顯示TRNO，型號，FNAM，WSTA在一個HTML表格。

來源

2017-03-09 User

後，你已經嘗試 – mlegg

代碼，您將需要跳過第一個記錄，然後之後解析每個記錄以提取您需要的數據。然後，我會將數據提供給一個句柄（或等價物）模板以生成適用的html。嘗試解決這些不同的步驟，然後將問題發佈到您遇到困難時嘗試。 – rasmeister

這似乎更像一個[ascii表]（https://ozh.github.io/ascii-tables/）比選項卡分隔值 –

提供的數據看起來像一個Ascii表，而不是一個製表符分隔的值。我已經添加了兩個解決方案

一個解決方案對於ASCII表 - https://jsfiddle.net/libin_v/uutc6gtk/

使用正則表達式從頭

拿到鑰匙

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

取各個值，通過使用我們剛纔分析的按鍵拼接線。鍵還沒有修剪（他們確實有他們的空白）。這使得拼接數據成爲可能。

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

通過將報頭完成2D陣列

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

渲染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/

將這些轉換爲對象。我用PapaParse

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

用我們喜歡的鍵變換對象。（簡單地說，刪除不需要的鍵）

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

轉換這些對象爲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);

來源

2017-03-10 02:07:57

如何將顯示爲製表符分隔格式的文本文件的內容顯示爲html表格

回答

相關問題