将 HTML 表格(作为字符串)转换为 JS 对象数组
Posted
技术标签:
【中文标题】将 HTML 表格(作为字符串)转换为 JS 对象数组【英文标题】:Convert HTML table (as a string) into JS Objects array 【发布时间】:2017-03-23 13:37:00 【问题描述】:将包含 html 表源代码的字符串转换为 javascript 对象数组的简单/优雅的方法是什么?
它将每个<tr>
转换为一个对象,并将每个<td>
转换为一个对象属性。
属性名称不是从表中提取的,它们已经定义了。
例如,将此代码作为字符串传递给 javascript 函数:
<table>
<tr>
<td>2280</td>
<td>23020044623</td>
<td>RTS</td>
<td>EUR</td>
<td>1</td>
<td>29/07/2015</td>
<td>10/07/2017</td>
<td>no</td>
</tr>
<tr>
<td>2281</td>
<td>23020011223</td>
<td></td>
<td>GBP</td>
<td>0,78</td>
<td>10/10/2013</td>
<td>10/10/2018</td>
<td>Occult</td>
</tr>
</table>
会返回:
// Properties names are known
[
prop1: '2280',
prop2: '23020044623',
prop3: 'RTS',
prop4: 'EUR',
prop5: '1',
prop6: '29/07/2015',
prop7: '10/07/2017',
prop8: 'no'
,
prop1: '2281',
prop2: '23020011223',
prop3: '',
prop4: 'GBP',
prop5: '0,78',
prop6: '10/10/2013',
prop7: '10/10/2018',
prop8: 'Occult'
]
【问题讨论】:
请阅读How to Ask。关键词:“搜索和研究”和“解释......任何阻碍你自己解决的困难”。 你想自己做这个解析吗?如果不对“将 html 转换为 json”进行 Google 搜索,则会显示一些可能有效的第三方选项。你试过什么? 【参考方案1】:您可以解析 HTML 并使用 map 和 reduce 来返回预期的对象数组
var html = '<table><tr><td>2280</td><td>23020044623</td><td>RTS</td><td>EUR</td><td>1</td><td>29/07/2015</td><td>10/07/2017</td><td>no</td></tr><tr><td>2281</td><td>23020011223</td><td></td><td>GBP</td><td>0,78</td><td>10/10/2013</td><td>10/10/2018</td><td>Occult</td></tr></table>';
var parser = new DOMParser();
var doc = parser.parseFromString(html, "text/html");
var obj = [].map.call(doc.querySelectorAll('tr'), tr =>
return [].slice.call(tr.querySelectorAll('td')).reduce( (a,b,i) =>
return a['prop' + (i+1)] = b.textContent, a;
, );
);
console.log(obj)
【讨论】:
【参考方案2】:你可以使用这个 ES6 函数:
var props = ['prop1', 'prop2', 'prop3', 'prop4', 'prop5', 'prop6', 'prop7', 'prop8'];
function fromTable(html)
return Array.from(
new DOMParser().parseFromString(html, "text/html").querySelectorAll('tr'),
row => [...row.cells].reduce(
(o, cell, i) => (o[props[i]] = cell.textContent, o), ));
// Sample data:
var html = `<table>
<tr>
<td>2280</td>
<td>23020044623</td>
<td>RTS</td>
<td>EUR</td>
<td>1</td>
<td>29/07/2015</td>
<td>10/07/2017</td>
<td>no</td>
</tr>
<tr>
<td>2281</td>
<td>23020011223</td>
<td></td>
<td>GBP</td>
<td>0,78</td>
<td>10/10/2013</td>
<td>10/10/2018</td>
<td>Occult</td>
</tr>
</table>`;
// Get object from HTML:
var res = fromTable(html);
// Output result
console.log(res);
.as-console-wrapper max-height: 100% !important; top: 0;
【讨论】:
【参考方案3】:遍历每个<tr>
,然后遍历每个<td>
。
(function()
var ob = [];
$('table tr').each(function()
var row = ;
$(this).children().each(function(ind)
row['prop' + (ind + 1)] = $(this).text();
)
ob.push(row);
);
console.log(ob);
)();
<script src="https://code.jquery.com/jquery-3.1.0.js"></script>
<table id="table">
<tr>
<td>2280</td>
<td>23020044623</td>
<td>RTS</td>
<td>EUR</td>
<td>1</td>
<td>29/07/2015</td>
<td>10/07/2017</td>
<td>no</td>
</tr>
<tr>
<td>2281</td>
<td>23020011223</td>
<td></td>
<td>GBP</td>
<td>0,78</td>
<td>10/10/2013</td>
<td>10/10/2018</td>
<td>Occult</td>
</tr>
</table>
【讨论】:
它说作为一个字符串以上是关于将 HTML 表格(作为字符串)转换为 JS 对象数组的主要内容,如果未能解决你的问题,请参考以下文章