Javascript 将无效HTML表解析为JSON
我正在尝试构建一个Chrome扩展（其目的是，该扩展读取一个编码和格式错误的表，生成一个JSON，并用JSON生成的更干净、更漂亮的表替换该表）。表/脚本如下所示（它们是可执行的）Javascript 将无效HTML表解析为JSON,javascript,Javascript,我正在尝试构建一个Chrome扩展（其目的是，该扩展读取一个编码和格式错误的表，生成一个JSON，并用JSON生成的更干净、更漂亮的表替换该表）。表/脚本如下所示（它们是可执行的） 函数数组化（集合）{ 返回Array.prototype.slice.call（collection）； } 功能工厂（标题）{ 返回函数（行）{ 返回arrayify（行单元格）。reduce（函数（上、当前、i）{ prev[headers[i]=curr.innerHTML； 返回上一个； }, {}); }
函数数组化（集合）{
返回Array.prototype.slice.call（collection）；
}
功能工厂（标题）{
返回函数（行）{
返回arrayify（行单元格）。reduce（函数（上、当前、i）{
prev[headers[i]=curr.innerHTML；
返回上一个；
}, {});
}
}
函数解析表（表）{
var headings=arrayify（table.tHead.rows[0].cells）.map（函数（标题）{
返回heading.innerHTML；
});
返回arrayify（table.tBodies[0].rows.map（工厂（标题））；
}
var table=document.querySelector（“表”）；
var数据=分析表（表）；
控制台日志（数据）
吃草
吃鱼
吃肉
喝酒
动物
母牛
哺乳动物
鲸鱼
第51区外国人
好的，您可能需要添加一些小调整，但我得到了一些东西：
var json_result = [];
var tds = document.querySelectorAll('td');
var ths = document.querySelectorAll('th');
var current_section = '';
var current_subsection = '';
var current_col = 0;
for(j in tds){
if(typeof tds[j].innerHTML !== "undefined"){
if(tds[j].innerHTML.indexOf('<input') > -1){
// checked box
json_result[current_section][current_subsection].push(ths[current_col+2].innerHTML);
current_col++;
}
else{
if(tds[j].innerHTML.indexOf(' ') == -1){
if(tds[j].attributes.rowspan){
//section
current_section = tds[j].innerHTML;
json_result[current_section] = [];
}
else{
//subsection
current_subsection = tds[j].innerHTML;
json_result[current_section][current_subsection] = [];
current_col = 0;
}
}
else{
current_col++;
}
}
}
}
console.log(json_result);
应该有一个
来放入这些
中。不要阅读HTML，而只是从数据中创建所需的对象。然后，它将不得不在更改后重新读取。只根据需要更新对象属性。为什么要费心“数组化”而不是仅仅使用DOM树API呢？您只需获取表和HTMLElement。children
已经是元素子元素的数组，因此您似乎可以这样做。@melpomene请运行代码段-输出在控制台中。目标模式是我在问题末尾制作的树形图。公平地说，您的代码已经假设表是有效的HTML，THEAD包含一组标题，TBODY包含一组行，所以您至少可以免费获得所有这些。您可以发布更长的示例表吗？您可以打印它吗？每次我尝试返回一个[]
数组。这很奇怪，当我在代码段编辑器中尝试时，我得到了[]，但在chrome中，一个简单的html文件具有完全相同的代码，我在回答中得到了输出“漂亮地打印它”到底是什么意思？我尝试了所有的技巧（比如将[]
更改为{}
）-似乎JSON格式不正确，或者我搞错了。
{
"": {
"Grass Eater": [
"Grass Eater"
]
},
"Animal": {
"Cow": [
"Grass Eater",
"Plant Eater",
"Singer",
"Wings"
],
"Platypus": [
"Grass Eater",
"Plant Eater",
"Water Drinker",
"Singer",
"Wings"
],
"Horse": [
"Grass Eater",
"Plant Eater",
"Singer",
"Wings"
],
"Alien": [
"Grass Eater",
"Plant Eater",
"Singer"
],
"Doggo": [
"Grass Eater",
"Plant Eater",
"Singer"
],
"Dragon": [
"Grass Eater",
"Plant Eater",
"Singer"
],
"Horse Cart": [
"Grass Eater",
"Plant Eater",
"Singer"
],
"Alligator": [
"Grass Eater",
"Plant Eater"
]
},
"Mammal": {
"Cow": [
"Grass Eater",
"Plant Eater",
"Singer",
"Dancer",
"Someone",
"Wings"
],
"Platypus": [
"Grass Eater",
"Plant Eater",
"Water Drinker",
"Singer",
"Dancer",
"Someone",
"LSleepyerally",
"Running",
"Out",
"Of",
"Now",
"Vegan",
"Sausage",
"Cheese",
"Nugget",
"Wings",
"Foodie",
"Hoodie",
"Finished",
""
],
"Horse": [
"Grass Eater",
"Plant Eater",
"Singer",
"Dancer",
"Someone",
"Wings"
],
"Alien": [
"Grass Eater",
"Plant Eater",
"Singer",
"Dancer"
],
"Doggo": [
"Grass Eater",
"Plant Eater",
"Singer",
"Dancer"
],
"Dragon": [
"Grass Eater",
"Plant Eater",
"Dancer"
],
"Horse Cart": [
"Grass Eater",
"Plant Eater"
],
"Alligator": [
"Grass Eater",
"Plant Eater"
]
},
"Marsupial": {
"Cow": [
"Grass Eater",
"Plant Eater",
"Fish Eater",
"Singer"
],
"Platypus": [
"Grass Eater",
"Plant Eater",
"Fish Eater",
"Water Drinker",
"Singer"
],
"Horse": [
"Grass Eater",
"Plant Eater",
"Fish Eater",
"Singer"
],
"Alien": [
"Grass Eater",
"Plant Eater",
"Fish Eater",
"Singer"
],
"Doggo": [
"Grass Eater",
"Plant Eater",
"Singer"
],
"Dragon": [
"Grass Eater"
],
"Horse Cart": [
"Grass Eater",
"Plant Eater"
],
"Alligator": [
"Grass Eater"
]
},
"Sleepy Mammal": {
"Cow": [
"Grass Eater",
"Fish Eater",
"Singer",
"Words",
"Hoodie"
],
"Platypus": [
"Grass Eater",
"Fish Eater",
"Water Drinker",
"Singer",
"Words",
"Hoodie"
],
"Horse": [
"Grass Eater",
"Fish Eater",
"Singer",
"Words",
"Hoodie"
],
"Alien": [
"Grass Eater",
"Fish Eater",
"Singer"
],
"Doggo": [
"Grass Eater",
"Fish Eater",
"Singer",
"Words",
"Hoodie"
],
"Dragon": [
"Grass Eater",
"Fish Eater",
"Words",
"Hoodie"
],
"Horse Cart": [
"Grass Eater",
"Plant Eater",
"Fish Eater"
],
"Alligator": [
"Grass Eater",
"Fish Eater"
]
},
"Squsihy": {
"Cow": [
"Grass Eater",
"Plant Eater",
"Fish Eater",
"Singer"
],
"Platypus": [
"Grass Eater",
"Plant Eater",
"Fish Eater",
"Water Drinker",
"Singer"
],
"Horse": [
"Grass Eater",
"Plant Eater",
"Fish Eater",
"Singer"
],
"Alien": [
"Grass Eater",
"Plant Eater",
"Fish Eater",
"Singer"
],
"Doggo": [
"Grass Eater",
"Plant Eater",
"Fish Eater",
"Singer"
],
"Dragon": [
"Grass Eater",
"Plant Eater",
"Fish Eater"
],
"Horse Cart": [
"Grass Eater",
"Plant Eater",
"Fish Eater"
],
"Alligator": [
"Grass Eater",
"Plant Eater",
"Fish Eater"
]
},
"Plushies": {
"Cow": [
"Grass Eater",
"Plant Eater",
"Singer",
"Someone",
"Running",
"Out",
"Of",
"Fake"
],
"Platypus": [
"Grass Eater",
"Plant Eater",
"Water Drinker",
"Oil Drinker",
"Milk Drinker",
"Singer",
"Someone",
"LSleepyerally",
"Running",
"Out",
"Of",
"Fake",
"Words",
"Now",
"Vegan",
"Sausage",
"Cheese",
"Nugget",
"Wings",
"Foodie",
"Hoodie",
"Finished",
""
],
"Horse": [
"Grass Eater",
"Plant Eater",
"Oil Drinker",
"Milk Drinker",
"Singer",
"Someone",
"LSleepyerally",
"Running",
"Out",
"Of",
"Fake",
"Words",
"Now",
"Vegan",
"Sausage",
"Cheese",
"Nugget",
"Wings",
"Foodie",
"Hoodie",
"Finished",
""
],
"Alien": [
"Grass Eater",
"Plant Eater"
]
}
}