如何从纯文本 table 中获取 html table
How to get an html table out of a plain text table
我有一些数据存储在纯文本文件中。它使用空格来分隔不同的列,但在不同的 table 中,列具有不同的宽度(不同的字符数)。 table 数据的内容包括单词、整数、浮点数和范围。
提取 javascript 中的数据并将其转换为 html table 的简单方法吗?我更喜欢一种可用于所有 table 的通用方法(意味着它必须自己检测新列的位置 - 固定索引是不可能的,因为如前所述,它们因文件而异) .
下面是一个示例,这些纯文本 table 看起来像这样:
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
...
这适用于您的数据:
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;
}
我认为这个人 here 有适合您的解决方案。
他根据空格拆分台词。
因此,一旦您获得数组中的数据,就可以简单地遍历数组并在字符串后附加 html 标记以形成 html table。可以参考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
希望对您有所帮助。但如果仍然没有,您真的需要仔细查看所有文件,并在它们之间找到至少一个关于更改列所遵循的模式的相似之处。
我有一些数据存储在纯文本文件中。它使用空格来分隔不同的列,但在不同的 table 中,列具有不同的宽度(不同的字符数)。 table 数据的内容包括单词、整数、浮点数和范围。
提取 javascript 中的数据并将其转换为 html table 的简单方法吗?我更喜欢一种可用于所有 table 的通用方法(意味着它必须自己检测新列的位置 - 固定索引是不可能的,因为如前所述,它们因文件而异) .
下面是一个示例,这些纯文本 table 看起来像这样:
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
...
这适用于您的数据:
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;
}
我认为这个人 here 有适合您的解决方案。
他根据空格拆分台词。
因此,一旦您获得数组中的数据,就可以简单地遍历数组并在字符串后附加 html 标记以形成 html table。可以参考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
希望对您有所帮助。但如果仍然没有,您真的需要仔细查看所有文件,并在它们之间找到至少一个关于更改列所遵循的模式的相似之处。