Javascript表字符串到数组答案

【问题标题】：Javascript table string to arrayJavascript表字符串到数组
【发布时间】：2013-09-18 16:38:45
【问题描述】：

我有一个 字符串，它看起来像：

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

...当然本质上是一张桌子。

我想将此字符串动态转换为包含 2 个数组的数组。日期之一，值之一。

[编辑于] 具有日期和值的对象数组也可以工作。

【问题讨论】：

用 html 解析器解析它。
您在使用任何库吗？ jQuery 可以做很短的工作......另外，是否有可靠的换行符？
也许 {date, value} 对象的数组更有意义？
我有 jquery，但我不想使用任何额外的库甚至 jquery 插件。想保持这种光。
@YuriyGalanter 那也行。我只需要一些东西来将其解析为可用的方式。

标签： javascript jquery arrays string html-table

【解决方案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}, ... ]

【讨论】：

@JonathanLonowski - 我还没有检查过这个问题的源代码，但我希望无论哪种方式 jQuery 都会在幕后使用相同的代码。
找到它：bugs.jquery.com/ticket/11617。而且，对于 2.0.x 和 1.10.x 来说，这可能不是（尽可能多的）问题，但它曾经是一个问题。

【解决方案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 demo.

【讨论】：

【解决方案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] })
}

这是一个 burte-force 字符串替换/拆分，但最后 arrObj 将有对象数组。

【讨论】：

谢谢！就我而言，这种方式是不错的选择。可以使用var arrStr = str.replace(/<td>/g, "").replace(/<tr>/g, "").split("</tr>");？

【解决方案4】：

如果它是一个有效的 html 表格结构，则将其包装在表格标签之间，并使用 jquery 对其进行解析。然后使用 jquery 的选择器来查找列。

例如这样的东西（伪代码，没试过）

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

【讨论】：

它不是一个表格——不在 DOM 中。这是一个字符串——从 Excel 电子表格文件中动态提取的文本
@DavidThomas 他在评论中说他有 jquery，看起来他可以使用它。

【解决方案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) 是跳过标题行。这将创建一个关联数组对象，将日期映射到值。假设日期是唯一的，这可能比两个数组或一个对象数组更有用。

【讨论】：