如何從純文本表中獲取HTML表

Question

我有一些數據存儲在純文本文件中。 它使用空格分隔不同的列，但在不同的表中，列的寬度不同（字符數不同）。 表數據的內容包括單詞，整數，浮點數和范圍。

是提取javascript中的數據並將其轉換為html表的簡單方法嗎？ 我更喜歡一種可用於所有表的通用方法（意味着它必須自己檢測新列的位置-固定索引是不可能的，因為如前所述，它們在文件之間是不同的）。

這是這些純文本表之一的示例：

Line1    23     45.4     12 - 14
Line2    4      5.9      < 8
Line3    13.56  105.34   20.37 - 130.20
Line4    7.2    14.2     10.1 - 14.0
...

Answer 1

這適用於您的數據：

function readTextFile(file)
{
    var rawFile = new XMLHttpRequest();
    var allText = '';
    rawFile.open('GET', file, false);
    rawFile.onreadystatechange = function ()
    {
        if(rawFile.readyState === 4)
        {
            if(rawFile.status === 200 || rawFile.status == 0)
            {
                allText = rawFile.responseText;
            }
        }
    }
    rawFile.send(null);
    return allText;
}

function returnColumns(file)
{
    var allText = readTextFile(file);
    var lines = allText.split('\n');
    var data = [];
    for(var i = 0; i < lines.length; i++)
    {
        if (lines[i] != '')
        {
            data[i] = [lines[i].slice(0, 9), lines[i].slice(10, 16), lines[i].slice(17, 25), lines[i].slice(26) ];
        }
    }
    return data;
}

function displayHtml()
{
    var data = returnColumns('data.txt');
    var html = '<table border="3">';
    for (var r = 0; r < data.length; r++)
    {
        html += '<tr>';
        for (var c = 0; c < data[r].length; c++)
        {
            html += '<td>' + data[r][c] + '</td>';
        }
        html += '</tr>';
    }
    html += '</table>';
    document.getElementById('content').innerHTML = html;
}

Answer 2

我認為這里的人為您提供了正確的解決方案。

他根據空格將行分開。

因此，一旦您將數據放入數組中，就可以簡單地循環遍歷數組，並使用html標記附加字符串以形成html表。 您可以在peeto的答案中引用displayHtml（）方法。

讓我知道您需要進一步的幫助。

編輯 **

因此，根據您提供的示例數據，我假設有兩個或更多空格可以更改為新列。 如果這樣，您可以在下面嘗試我的代碼。

var data = `23     45.4     12 - 14
4      5.9      < 8
13.56  105.34   20.37 - 130.20
7.2    14.2     10.1 - 14.0`;

data = data.split(/\r?\n/); // split text into lines

var lines = [];
for (var i = 0; i < data.length; i++) {
  data[i] = data[i].trim();
  lines.push(data[i].split(/[ ][ ]+/)); // split lines further based on 2 or more spaces
}
// creating html string
var htmlStr = '<table id=\'myTable\'>';
for (var i = 0; i < lines.length; i++) {
  htmlStr += '<tr>';
  for (var j = 0; j < lines[i].length; j++) {
    htmlStr += '<td>' + lines[i][j] + '</td>';
  }
  htmlStr += '</tr>';
}
htmlStr += '</table>';

document.getElementById('myDiv').innerHTML = htmlStr; // append string wherever you like

我希望這可以幫助你。 但是，如果仍然沒有，您確實需要仔細查看所有文件，並找出它們之間至少有一個相似之處，以了解更改列所遵循的模式。