javascript - 如何提取html并将它们添加到数组中？

Question

我有一个关于我上一篇文章的问题

如何从 html 标记中提取文本

Oriol 的回答在分离表结构之间的 html 标记方面帮助了我很多。

但是，还有另一个问题。

var project =[''];

$('#htmlData').contents().each(function(){
    if($(this).is('table')){
         //do something with table
         project.push['end of table'];  //this line of codes is the problem....
    }else{
        project[project.length-1] += (
            this.nodeType === 3  ?  $(this).text()  :
            (this.nodeType === 1  ?  this.outerHTML  :  '')
        );
    }
});

for(var i=0; i<project.length; ++i){
    project[i] = project[i].replace(/\s+/g,' ') // Collapse whitespaces
    .replace(/^\s/,'') // Remove whitespace at the beginning
    .replace(/\s$/,''); // Remove whitespace at the end
}

假设我有html如下数据

<em>first part</em> of texts here

    <table>
    ......
    ......
    </table>

<em>second part</em> of texts

我的项目数组最终如下：

 //2 elements
    ('<em>first part</em> of texts here','end of table <em>second part</em> of texts) 

但我想要的结果是

  //3 elements
    ('<em>first part</em> of texts here','end of table','<em>second part</em> of texts) 

end of tablearray如果选择器loop要table标记，我会推动它。

我该如何做到这一点？谢谢您的帮助！

Answer 1

问题是您在处理表格后没有在数组中创建新位置。在这种情况下，project.length-1 将始终引用“表结尾”位置，因此它只是将下一个“非表”数据与它连接起来。

尝试这个：

    var project =[''],
    j = 0;

$('#htmlData').contents().each(function(){
    if($(this).is('table')){
         //do something with table
         project.push('end of table');  //this line of codes is the problem....
         j=project.length;
    }else{
        if (project[j] == undefined) project[j] = "";
        project[j] += (
            this.nodeType === 3  ?  $(this).text()  :
            (this.nodeType === 1  ?  this.outerHTML  :  '')
        );

    }
});
for(var i=0; i<project.length; ++i){
    project[i] = project[i].replace(/\s+/g,' ') // Collapse whitespaces
    .replace(/^\s/,'') // Remove whitespace at the beginning
    .replace(/\s$/,''); // Remove whitespace at the end
}
console.log(project);

我敢肯定有一种更清洁的方法，但这应该会给你这个想法。