在Javascript中解析HTML的最佳方法

我在学习RegExp时遇到了很多麻烦,并提出了一个很好的算法来做到这一点.我有这个HTML字符串,我需要解析.请注意,当我解析它时,它仍然是一个字符串对象,而不是浏览器上的HTML,因为我需要在它到达之前解析它.HTML看起来像这样:

  
    
  
  

  
    

    

        
Tibetan Villages
    
    
    

        
ID
        
Latitude
        
Longitude
        
Place Name
        
English Translation
    
    
    
    

    
        
3394
        
29.1
        
93.15
        
??????????????
        
Dam Drongtso 
    
    
    
    
    

  

我需要像这样得到它:

3394,
29.1,
93.15,
??????????????,
Dam Drongtso

基本上是一个数组...如果它根据它的字段标题匹配更好,并且它们以某种方式从哪个表匹配,看起来像这样:

Tibetan Villages

ID
Latitude
Longitude
Place Name
English Translation

发现JavaScript不支持精彩的映射是一个无赖,我有我想要的工作.然而,它是非常非常硬编码,我想我应该使用RegExp来更好地处理这个问题.不幸的是我有一个非常艰难的时间:(.这是我解析我的字符串的功能(非常丑陋的IMO):

    function parseHTML(html){

    //Getting the layer name
    alert(html);
    //Lousy attempt at RegExp
    var somestring = html.replace('/m//\+\//m/',' ');
    alert(somestring);
    var startPos = html.indexOf('');
    var length = ('').length;
    var endPos = html.indexOf('');
    var dataLayer = html.substring(startPos + length, endPos);

    //Getting the data headers
    startPos = html.indexOf('');
    length = ('').length;
    endPos = html.indexOf('');
    var newString = html.substring(startPos + length, endPos);
    newString = newString.replace(//g, '');
    newString = newString.substring(0, newString.lastIndexOf(''));
    var featureInfoHeaders = new Array();
    featureInfoHeaders = newString.split('');

    //Getting the data
    startPos = html.indexOf('');
    length = ('').length;
    endPos = html.indexOf('');
    newString = html.substring(startPos + length, endPos);
    newString = newString.substring(0, newString.lastIndexOf(''));
    var featureInfoData = new Array();
    featureInfoData = newString.split('');

    for(var s = 0; s < featureInfoData.length; s++){
        startPos = featureInfoData[s].indexOf('');
        length = ('').length;
        endPos = featureInfoData[s].lastIndexOf('');
        featureInfoData[s] = featureInfoData[s].substring(startPos + length, endPos);
        featureInfoData[s] = featureInfoData[s].replace(//g, '');
        featureInfoData[s] = featureInfoData[s].split('');
    }//end for

    alert(featureInfoData);

    //Put all the feature info in one array
    var featureInfo = new Array();
    var len = featureInfoData.length;
    for(var j = 0; j < len; j++){
        featureInfo[j] = new Object();
        featureInfo[j].id = featureInfoData[j][0];
        featureInfo[j].latitude = featureInfoData[j][1];
        featureInfo[j].longitude = featureInfoData[j][2];
        featureInfo[j].placeName = featureInfoData[j][3];
        featureInfo[j].translation = featureInfoData[j][4];
        }//end for 

    //This can be ignored for now...
        var string = redesignHTML(featureInfoHeaders, featureInfo);
        return string;

    }//end parseHTML

因此,您可以看到该字符串中的内容是否发生了变化,我的代码将被严重破坏.我想尽可能地避免这种情况,并尝试编写更好的代码.我感谢您给我的所有帮助和建议.

执行以下步骤:

创建一个新的 documentFragment

将HTML字符串放入其中

使用选择器来获得您想要的

为什么所有的解析工作 - 无论如何都无法工作,因为HTML 无法通过RegExp解析 - 当你有最好的HTML解析器可用时？(浏览器)

您可以使用jQuery轻松遍历DOM并自动创建具有该结构的对象.

var $dom = $('').html(the_html_string_variable_goes_here);
var featureInfo = {};

$('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;
});

工作演示

代码可以使用内部具有不同结构的多个表,以及每个表内的多个数据行.

featureInfo将保存最终的结构和数据,并且可以像访问一样访问

alert( featureInfo['Tibetan Villages'][0]['English Translation'] );

要么

alert( featureInfo['Tibetan Villages'][0].id );

"正确"的做法是DOMParser.像这样做:

var parsed=new DOMParser.parseFromString(htmlString,'text/html');

或者,如果您担心浏览器兼容性,请使用MDN文档中的polyfill:

/*
 * DOMParser HTML extension
 * 2012-09-04
 * 
 * By Eli Grey, http://eligrey.com
 * Public domain.
 * NO WARRANTY EXPRESSED OR IMPLIED. USE AT YOUR OWN RISK.
 */

/*! @source https://gist.github.com/1129031 */
/*global document, DOMParser*/

(function(DOMParser) {
    "use strict";

    var
      DOMParser_proto = DOMParser.prototype
    , real_parseFromString = DOMParser_proto.parseFromString
    ;

    // Firefox/Opera/IE throw errors on unsupported types
    try {
        // WebKit returns null on unsupported types
        if ((new DOMParser).parseFromString("", "text/html")) {
            // text/html parsing is natively supported
            return;
        }
    } catch (ex) {}

    DOMParser_proto.parseFromString = function(markup, type) {
        if (/^\s*text\/html\s*(?:;|$)/i.test(type)) {
            var
              doc = document.implementation.createHTMLDocument("")
            ;
                if (markup.toLowerCase().indexOf(' -1) {
                    doc.documentElement.innerHTML = markup;
                }
                else {
                    doc.body.innerHTML = markup;
                }
            return doc;
        } else {
            return real_parseFromString.apply(this, arguments);
        }
    };
}(DOMParser));

如果可以,请更改服务器端代码(添加JSON)

如果您是在服务器端生成结果HTML的人,那么您也可以在那里生成JSON并将其与HTML内容一起传递给HTML.您不必在客户端解析任何内容,并且所有数据都可以立即用于客户端脚本.

您可以轻松地将JSON table作为data属性值放入元素中:

    ...

或者,您可以data向包含数据的TD 添加属性,并仅解析那些使用jQuery选择器并从中生成Javascript对象的属性.无需RegExp解析.