いくつかの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...." 
    } 
] 

私はいくつかの異なるアプローチを試してみました。 Regexの使用（私のテストでは動作しましたが、プロダクションに入れなかった場合、期待通りに動作しなくなりました。また、正規表現を使って正規表現を解析するのが最善の方法ではないことを示す記事もあります）：

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

あなたが必要な情報をつかむためにあなたのHTML文字列は、DOMノードの配列に変換する$.parseHTML()を使用して、ノードをループすることができます。 .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>