使用jQuery遍歷DOM

Question

我試圖為我自己的項目之一抓取一個歌詞網站，但我遇到了jQuery的一些問題。 我能夠獲得藝術家和歌曲的名稱，但是歌詞被封裝在該div中，很難從中提取數據。 我正在發布HTML示例，我的代碼以及正在記錄的for循環的一個迭代。

本質上，我試圖使用內聯樣式插入div中的所有歌詞，但是我要打印到控制台的對象采用下面顯示的對象的形式。 我以為我可以在map函數中執行（this.prev（）。data（）），但它似乎不起作用。 我將參考任何有關如何正確解析方法的見解或參考。

謝謝！

HTML

<div id="main">
<div class="...">...</div>
<h2>ARTIST</h2>
<div class="...">...</div>
<b>"SONG"</b>
<br>
<br>
<div style="margin-left:10px;margin-right:10px;">
    <!--start of lyrics -->
    "
    lyric1"
    <br>
    "
    lyric2"
    <br>
    "
    lyric3"
    <br>
    "lyric4"
    etc...
    <!-- end of lyrics -->
</div>

碼

    request(url, function(error, response, html){
    if(!error){
        var $ = cheerio.load(html);
        var artist, song, lyrics;
        var json = { artist : "", song : "", lyrics : []};

        $('#main').filter(function(){
            var data = $(this);
            title = data.find('h2').text().replace(' LYRICS','');
            artist = data.find('b').text().replace(/["]+/g, '');
            var lines = data.children().eq(6).children().map(function() {
                console.log(this)
                console.log("<<<<<<<<<<<<<<<<<<<<<<<<<<<<")
            });
        })
    }
})

}）

來自console.log打印的地圖功能的一項

{ type: 'tag',
      name: 'br',
      attribs: {},
      children: [],
      next:
       { data: '\nI remember you was conflicted, misusing your influence\r\n',
         type: 'text',
         next:
          { data: ' end of lyrics ',
            type: 'comment',
            next: [Object],
            prev: [Circular],
            parent: [Object] },
         prev: [Circular],
         parent:
          { type: 'tag',
            name: 'div',
            attribs: [Object],
            children: [Object],
            next: [Object],
            prev: [Object],
            parent: [Object] } },
      prev:
       { data: '\nWe want the funk',
         type: 'text',
         next: [Circular],
         prev:
          { type: 'tag',
            name: 'br',
            attribs: {},
            children: [],
            next: [Circular],
            prev: [Object],
            parent: [Object] },
         parent:
          { type: 'tag',
            name: 'div',
            attribs: [Object],
            children: [Object],
            next: [Object],
            prev: [Object],
            parent: [Object] } },
      parent:
       { type: 'tag',
         name: 'div',
         attribs: { style: 'margin-left:10px;margin-right:10px;' },
         children:
          [ bunch of objects within arrays and one [Circular] ]
         next:
          { data: '\r\n\r\n',
            type: 'text',
            next: [Object],
            prev: [Circular],
            parent: [Object] },
         prev:
          { data: '\r\n\r\n',
            type: 'text',
            next: [Circular],
            prev: [Object],
            parent: [Object] },
         parent:
          { type: 'tag',
            name: 'div',
            attribs: [Object],
            children: [Object],
            next: [Object],
            prev: [Object],
            parent: [Object] } } }

Answer 1

您要使用contents()獲取文本節點，並且要使用map（）將其轉換為數組格式。 返回null將從數組中排除該行。

 var elems = $('#main').children().eq(6).contents().clone(); elems.find("br").remove(); var text = elems.map( function () { var ln = $.trim($(this).text().replace(/["\\\\n]/g,"")); return (ln.length) ? ln : null; }).get(); console.log(text); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <div id="main"> <div class="...">...</div> <h2>ARTIST</h2> <div class="...">...</div> <b>"SONG"</b> <br> <br> <div style="margin-left:10px;margin-right:10px;"> <!--start of lyrics --> " lyric1" <br> " lyric2" <br> " lyric3" <br> "lyric4" <!-- end of lyrics --> </div> </div>