如何将显示为制表符分隔格式的文本文件的内容显示为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表格

回答

相关问题