JavaScript表格字符串转换为数组

Question

我有一个看起来像这样的字符串:

<tr><td>Date</td><td>Value</td></tr>
<tr><td>2013-01-01</td><td>231.198</td></tr>
<tr><td>2013-02-01</td><td>232.770</td></tr>
<tr><td>2013-03-01</td><td>232.340</td></tr>
<tr><td>2013-04-01</td><td>231.485</td></tr>
<tr><td>2013-05-01</td><td>231.831</td></tr>
<tr><td>2013-06-01</td><td>232.944</td></tr>
<tr><td>2013-07-01</td><td>233.318</td></tr>

这当然是一个表格。

我希望动态地将这个字符串转换成包含两个数组的数组。一个是日期，另一个是值。

[编辑] 包含日期和值的对象数组也可以。

- Shazboticus S Shazbot

---

使用HTML解析器对其进行解析。 - progrenhard

你是否使用任何库？jQuery可以轻松解决这个问题... 另外，有可靠的换行符吗？ - nrabinowitz

也许一个包含{日期, 值}对象的数组更有意义？ - Yuriy Galanter

我有jQuery，但我宁愿不使用任何额外的库或甚至是jQuery插件。希望保持轻量级。 - Shazboticus S Shazbot

@YuriyGalanter 那也可以。我只需要将其解析成可用的方式。 - Shazboticus S Shazbot

Answer 1

以下内容：

以下内容：

var input = // your string

var output = $(input).slice(1).map(function(i,el) {
    var tds = $(el).find("td");
    return { "date" : tds.eq(0).text(), "value" : tds.eq(1).text() };
}).get();

该函数将返回一个对象数组，格式如下：

[{"date":"2013-01-01","value":"231.198"}, {"date":"2013-02-01","value":"232.770"}, ... ]

如果您希望将每个value视为数字，则可以按以下方式进行转换：

    return { "date" : tds.eq(0).text(), "value" : +tds.eq(1).text() };
    // add the unary plus operator ---------------^

然后结果将是：

[{"date":"2013-01-01","value":231.198}, {"date":"2013-02-01","value":232.77}, ... ]

- nnnnnn

---

@JonathanLonowski - 我还没有检查这个问题的源代码，但我预计无论如何jQuery都会在底层使用相同的代码。 - nnnnnn

找到了：http://bugs.jquery.com/ticket/11617。而且，虽然在2.0.x和1.10.x中可能不是（那么）令人担忧的问题，但曾经是一个问题。 - Jonathan Lonowski

Answer 2

尽管您已经接受了一个答案，但我认为我应该发布一个纯JavaScript的解决方案（尽管这在很大程度上是因为在Barmar指出您愿意并能够使用jQuery之前，我花了时间来解决它）：

function cellContents(htmlStr, what) {
    var _table = document.createElement('table');
    _table.innerHTML = htmlStr;
    var rows = _table.getElementsByTagName('tr'),
        text = 'textContent' in document ? 'textContent' : 'innerText',
        cells,
        matches = {};
    for (var w = 0, wL = what.length; w < wL; w++) {
        matches[what[w]] = [];
        for (var r = 1, rL = rows.length; r < rL; r++) {
            cells = rows[r].getElementsByTagName('td');
            matches[what[w]].push(cells[w][text]);
        }
    }
    return matches;
}

var str = "<tr><td>Date</td><td>Value</td></tr><tr><td>2013-01-01</td><td>231.198</td></tr><tr><td>2013-02-01</td><td>232.770</td></tr><tr><td>2013-03-01</td><td>232.340</td></tr><tr><td>2013-04-01</td><td>231.485</td></tr><tr><td>2013-05-01</td><td>231.831</td></tr><tr><td>2013-06-01</td><td>232.944</td></tr><tr><td>2013-07-01</td><td>233.318</td></tr>";

console.log(cellContents(str, ['dates', 'values']));

JS Fiddle演示。

- David Thomas

Answer 3

对于纯JavaScript解决方案，您可以尝试类似以下方式（假设str保存了您的字符串）：

var arrStr = str.replace(/<td>/g, "").replace(/<tr>/g, "").split("</td></tr>");
var arrObj = [];
var arrData

for (var i = 1; i < arrStr.length - 1; i++) {
    arrData = arrStr[i].split("</td>");
    arrObj.push({ Date: arrData[0], Value: arrData[1] })
}

这是一种暴力替换/分割字符串的方法，但最终arrObj将包含对象数组。

- Yuriy Galanter

---

谢谢！在我的情况下，这种方法是一个不错的选择。也许可以使用 var arrStr = str.replace(/<td>/g, "").replace(/<tr>/g, "").split("</tr>");？ - Max Makhrov

Answer 4

如果是有效的HTML表结构，请在表标签之间进行包装，并使用jQuery来解析它。 然后使用jQuery的选择器来查找列。

例如，类似于以下内容（伪代码，尚未尝试）

table = $(yourTableString);
dates  =  table.find("tr td:nth-child(1)");
values =  table.find("tr td:nth-child(2)");

- Rainer Plumer

---

这不是一个表格 - 不在DOM中。它是一个字符串 - 动态从Excel电子表格文件中提取的文本。 - Shazboticus S Shazbot

@DavidThomas 他说他在评论中有jQuery，看起来他愿意使用它。 - Barmar

Answer 5

使用jQuery：

var table = $('<table>'+str+'</table>');
var result = {};
table.find('tr:gt(0)').each(function () {
    var date = $(this).find("td:nth-child(1)").text();
    var value = $(this).find("td:nth-child(2)").text();
    result[date] = value;
}

:gt(0) 是用来跳过标题行的。这将创建一个关联数组对象，将日期映射到值。假设日期是唯一的，这比两个数组或对象数组更有用。

- Barmar