JSFiddle - React, Tailwind, and code Playground
CSS
th, td{border:1px solid #ccc}
JavaScript
var htmlstring = '<html><head><title>Geoserver GetFeatureInfo output</title></head><style type="text/css"> table.featureInfo, table.featureInfo td, table.featureInfo th { border:1px solid #ddd; border-collapse:collapse; margin:0; padding:0; font-size: 90%; padding:.2em .1em; } table.featureInfo th { padding:.2em .2em; font-weight:bold; background:#eee; } table.featureInfo td{ background:#fff; } table.featureInfo tr.odd td{ background:#eee; } table.featureInfo caption{ text-align:left; font-size:100%; font-weight:bold; text-transform:uppercase; padding:.2em .2em; } </style> <body><table class="featureInfo2"> <tr><th class="dataLayer" colspan="5">Tibetan Villages</th></tr><!-- EOF Data Layer --> <tr class="dataHeaders"> <th>ID</th> <th>Latitude</th> <th>Longitude</th> <th>Place Name</th> <th>English Translation</th> </tr><!-- EOF Data Headers --><!-- Data --> <tr> <!-- Feature Info Data --> <td>3394</td> <td>29.1</td> <td>93.15</td> <td>བསྡམས་གྲོང་ཚོ།</td> <td>Dam Drongtso </td> </tr><!-- EOF Feature Info Data --><!-- End Data --></table><br/> </body></html>';
var dom = $('<div>').html(htmlstring);
var featureInfo = {};
console.log( dom.find('table').length );
$('table:has(.dataLayer)', dom).each(function(){
var $tbl = $(this);
var section = $tbl.find('.dataLayer').text();
var obj = [];
var $structure = $tbl.find('.dataHeaders');
var structure = $structure.find('th').map(function(){return $(this).text().toLowerCase();});
var $datarows= $structure.nextAll('tr');
$datarows.each(function(i){
obj[i] = {};
$(this).find('td').each(function(index,element){
obj[i][structure[index]] = $(element).text();
});
});
featureInfo[section] = obj;
...