如何提取html並將它們添加到數組？

Question

我有一個關於我的過去後

How to extract texts from html markup

奧里奧爾的回答幫了我很多的表結構之間不同的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) 

如果選擇器loop到table標記，是我推到array。

我該如何做到這一點？謝謝您的幫助！

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); 

我敢肯定有一個更清潔的方式，但是這應該給你的想法。