文章/答案/技术大牛

发布

问使用jQuery遍历DOM
EN

Stack Overflow用户

提问于 2015-04-18 02:15:56

回答 1查看 67关注 0票数 1

我正在尝试为我自己的一个项目建立一个歌词网站，但我在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] } } }

javascript

jquery

html

css

web-scraping

回答 1

Stack Overflow用户

发布于 2015-04-18 02:33:02

您希望使用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>

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/29706620

复制

相似问题

问使用jQuery遍历DOM
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问使用jQuery遍历DOMEN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问使用jQuery遍历DOM
EN