【问题标题】:How to get an html table out of a plain text table如何从纯文本表中获取 html 表
【发布时间】:2017-08-22 13:59:30
【问题描述】:

我有一些数据存储在纯文本文件中。它使用空格分隔不同的列,但在不同的表中,列具有不同的宽度(不同的字符数)。表格数据的内容包括单词、整数、浮点数和范围。

在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
...

【问题讨论】:

  • 列、空格、制表符等的界限是什么?列后是否有最小/最大空格数?有简单的方法吗?我对此表示怀疑,您的任意数据格式不规则。 hack 解决方案是将其全部放入 &lt;pre&gt; 标记中以与纯文本演示文稿一起使用。
  • 列全部用空格隔开。可以这么说,我需要一种方法来查找一行文本中的单词/数字/范围的索引,以便之后我可以通过这些索引拆分行。
  • 列似乎使用等距字体中的空格来将文本呈现与列对齐。它们不是由空格分隔 - 否则“
  • 文件包含 2 到 10 列。它们中的每一个都包含一个单词、一个整数或浮点数、一个整数/浮点数范围(例如'12.34 - 5.67')或一组由单个空格分隔的2或3个单词。似乎很难解决,我知道...

标签: javascript html datatable plaintext


【解决方案1】:

我认为这个人 here 有适合你的解决方案。

他正在根据空格分割他的线条。

因此,一旦您将数据放入数组中,您就可以简单地循环遍历数组并将带有 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

我希望这对你有帮助。但如果仍然没有,您真的需要仔细查看所有文件,并在它们之间找到至少一个相似之处,即更改列所遵循的模式。

【讨论】:

  • 仅链接的答案并不是真正的答案,这应该是评论或扩展以适合此处的问题。
  • 这接近我想要的。我认为它会在我的情况下进行一些修改。非常感谢。
【解决方案2】:

这适用于您的数据:

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

【讨论】:

  • 这没有回答如何以编程方式从文件内容中确定列的位置。
  • 不,当然不是,列在固定位置,所以我只是查看了数据。当然,我确实测试了代码。
  • 不知道为什么我被否决了。如果是 CSV,则可以从我的代码中确定答案,即: var columns = row.split('\t');如果它们不在固定位置或 CSV 中,则没有真正的解决方案。
  • TBH 老实说,我确实注意到我实际上弄错了索引,但希望@Mountain 可以处理这个问题
  • 引用问题本身“固定索引是不可能的,因为如前所述,它们因文件而异”,这可能是您投反对票的原因。
猜你喜欢
  • 1970-01-01
  • 2021-08-21
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2012-06-07
  • 2019-10-21
  • 1970-01-01
  • 2013-01-09
相关资源
最近更新 更多