將一些html代碼拆分爲對象數組

Question

我想分析一些html代碼並將其分解爲一組對象。

下面是一些例子的html代碼：

<slide data-time=5> 
    <div class="cds-block-title">Master Calendar</div> 
    <div class="cds-block-content">iframe to master calendar</div> 
</slide> 

<slide data-time=5> 
    <div class="cds-block-title">Weather</div> 
    <div class="cds-block-content">iframe to master Weather App</div> 
</slide> 

我的目標是把它分解成類似這樣的對象：

[ 
    { 
     "html":"<slide.....</slide>", 
     "time":"5", 
     "title":"Master Calendar", 
     "content":"iframe...." 
    }, 
    { 
     "html":"<slide.....</slide>", 
     "time":"5", 
     "title":"Master Calendar", 
     "content":"iframe...." 
    } 
] 

我已經嘗試了幾種不同的方法。 使用正則表達式（這工作在我的測試，但不是當我把它放在生產，.match停止工作如預期，我也讀了幾篇文章說，使用正則表達式來解析HTML代碼是不是最好的辦法）：

function splitSlidesHtml(html){ 
var html = '<slide data-time="5"><div class="cds-block-title">Activities & Sports</div><div class="cds-block-content">content</div></slide><slide data-time="5"><div class="cds-block-title">weather</div><div class="cds-block-content">content</div></slide>"'; 
    var slides = html.match(/<slide.*?>(.*?)<\/slide>/g); 
    var slidesA = []; 
    if (!slides) { 
    slidesA.push({"html":html}); 
    } else { 
    for (i in slides){ 
     var c = {}; 
     c.html = slides[i]; 
     c.time = slides[i].match(/(data-time=)(.*?)>/)[2].replace(/['"]+/g, ''); // extract the time, and replace any quotes that might be around it 
     c.title = slides[i].match(/<div class="cds-block-title">(.*?)<\/div>/)[1]; 
     c.content = slides[i].match(/<div class="cds-block-content">(.*?)<\/div>/)[1]; 
     slidesA.push(c); 
    } 
    } 
    return slidesA; 
} // end splitSlidesHtml 

我也嘗試過使用jQuery，這種類型的工作，但我不知道parseHTML知道如何確保它在不同的幻燈片中打破。

var slides = $.parseHTML(html); 
console.log(slides); 
console.log(slides[0].innerHTML); 
console.log(slides[0].outerHTML); 

Answer 1

這是我終於想出了。我在地圖工作中遇到了麻煩，無法正確地獲取時間。

var html = sheetData['values'][prop]['html'];   
var parsed = $.parseHTML(html); 
var isSlide = true; 
for (n in parsed){ 
    var cur = parsed[n]; 
    if (cur.nodeName == "SLIDE"){ 
    var curSlide = { 
     html: cur.outerHTML, // store the HTML 
     time: cur.dataset.time, // store the data-time attribute 
     title: $('.cds-block-title', cur).html(), // store the title 
     content: $('.cds-block-content', cur).html(), // store the content 
    }; 
    } else { 
    isSlide = false; 
    } 
} 

Answer 2

您可以使用$.parseHTML()你的HTML字符串循環轉換成DOM節點的數組，然後通過節點搶你所需要的信息。在這種情況下，當您將每個節點映射到其他節點時，.map()是一個很好的用法。

var html = '<slide data-time=5>\ 
 
    <div class="cds-block-title">Master Calendar</div>\ 
 
    <div class="cds-block-content">iframe to master calendar</div>\ 
 
</slide>\ 
 
<slide data-time=5>\ 
 
    <div class="cds-block-title">Weather</div>\ 
 
    <div class="cds-block-content">iframe to master Weather App</div>\ 
 
</slide>'; 
 

 
var slides = $($.parseHTML(html)).map(function() { 
 
    return { 
 
     // store the HTML 
 
     html: this.outerHTML, 
 
     // store the data-time attribute 
 
     time: this.dataset.time, 
 
     // store the title 
 
     title: $('.cds-block-title', this).text(), 
 
     // store the content 
 
     content: $('.cds-block-content', this).text(), 
 
    }; 
 
}).get(); 
 

 
console.log(slides);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>