javascript - 表 html 到数组

Question

我有要转换为数组的 JSON 内容。 该 JSON 内容是一个包含单元格值的 HTML 表格。我想将那些单元格转换成一个数组，这样我就可以在我的项目中进一步使用它。

我正在努力将这些单元格值转换为数组。

所以我有这个:

JSON(非常小的片段):

{
    "textpage": {
        "content": "<table width=\"512\">\r\n<tbody>\r\n<tr>\r\n<td width=\"64\">8211</td>\r\n<td width=\"64\">8231</td>\r\n<td width=\"64\">1309</td>\r\n<td width=\"64\">1333</td>\r\n<td width=\"64\">1011</td>\r\n<td width=\"64\">1035</td>\r\n<td width=\"64\">1062</td>\r\n<td width=\"64\">1087</td>\r\n</tr>\r\n<tr>\r\n<td>8212</td>\r\n<td>8232</td>\r\n<td>1311</td>\r\n<td>1334</td>\r\n<td>1012</td>\r\n<td>1036</td>\r\n<td>1063</td>\r\n<td>1091</td>\r\n</tr>\r\n<tr>\r\n<td>8218</td>\r\n<td>8233</td>\r\n<td>1312</td>\r\n<td>1335</td>\r\n<td>1013</td>\r\n<td>1037</td>\r\n<td>1064</td>\r\n<td>1092</td>\r\n</tr>\r\n<tr>\r\n<td>8219</td>\r\n<td>8239</td>\r\n<td>1313</td>\r\n<td>1336</td>\r\n<td>1014</td> 
///////// and whole lot more stuff //////////
    },

jQuery:

function getPostalcode(){

 var url = 'link-to-text-page';
 $.getJSON(url+'?format=json', function(data){
   var content = data.textpage.content,
       codes = [];

   $(content + 'tr td').each(function(){
     var code = $(this).text();
     codes.push(code)
   });
  codes.join('');   
  console.log(codes)
 });
}

那个 console.log 返回这个:

Array [ "   8211 8231 1309 1333 1011 1035 10…" ]

我需要它读起来像

Array ["8211,8231,1309,1333,1011,1035,10…" ]

问题是那些单元格值是文本。那么我该如何转换变量/数组中的这些值呢？

我试过这样的事情:

var code = $(this).text();
parsed = JSON.parse(code)

或者:

var code = $(this).text();
$(code).text(function(i, val) {
  return val.replace(/,/g, ", ");
});

非常感谢任何帮助!

Answer 1

选项 1:快速破解正则表达式

let html = data.textpage.content;
let values = html.match(/<td[^>]*>([^<]+)/g)
                 .map( s => s.replace(/<.+?>/,'') );
// [ '8211', '8231', '1309', '1333', '1011', '1035', '1062', '1087', … ]

或者，如果您想要一个数字数组:

let values = html.match(/<td[^>]*>([^<]+)/g)
                 .map( s => s.replace(/<.+?>/,'')*1 );
// [ 8211, 8231, 1309, 1333, 1011, 1035, 1062, 1087, … ]

编辑:这是一个更优雅的正则表达式解决方案:

let values = html.match(/[^<>]+(?=<\/td>)/g).map( s => s*1 );
// [ 8211, 8231, 1309, 1333, 1011, 1035, 1062, 1087, … ]

let values = html.match(/[^<>]+(?=<\/td>)/g).map(parseFloat);
// [ 8211, 8231, 1309, 1333, 1011, 1035, 1062, 1087, … ]

注意:在上面使用 parseInt 而不是 parseFloat 会给你非常错误的答案。你能找出原因吗？

选项2:jQuery HTML解析和选择

let html = data.textpage.content;
let values = $(html).find('td').map((_,td) => $(td).text()*1 );
// [ 8211, 8231, 1309, 1333, 1011, 1035, 1062, 1087, … ]

请注意 jQuery's map method不同于 JavaScript's Array map method ;特别是，jQuery 方法首先提供值的索引，而 Array 方法其次提供索引。这就是 jQuery 版本具有 (_,td) 的原因:在获取参数之前，我通过将索引分配给名为 _ 的变量来“丢弃”索引关心。

此外，如果您不熟悉 lambda 语法 x => someCode() 或 (a,b,c) => someCode()，如上所示，请注意它们等效于 function(x){ return someCode() } 和 function(a,b,c){ return someCode() }。