从循环中获取 HTML 属性答案

【问题标题】：Get HTML attributes from loop从循环中获取 HTML 属性
【发布时间】：2015-10-13 03:13:30
【问题描述】：

我有一个物品清单：

<div class="item">
    <a href="//external-link.com">
        <img src="main-image.jpg" alt=""/>
    </a>
    <h2> Title </h2>
    <p> Description lorem here </p>
</div>
<div class="item">
    <a href="//external-link.com">
        <img src="main-image.jpg" alt=""/>
    </a>
    <h2> Title </h2>
    <p> Description lorem here </p>
</div>
<div class="item">
    <a href="//external-link.com">
        <img src="main-image.jpg" alt=""/>
    </a>
    <h2> Title </h2>
    <p> Description lorem here </p>
</div>

我想提取<h2>标签的文本，以及<a>和<img>标签的“src”和“href”，但我不知道如何提取“src”和“href”属性。

这有点像我正在使用的东西：

require 'nokogiri'
require 'open-uri'

pageURL = 'http://ticketdriver.com/amg/buy/tickets'
page = Nokogiri::HTML(open(pageURL), nil, 'UTF-8')

page.css('.item').each do |node|
    title = node.css('h2').text
    srcUrl = node.css('img')['src']
end

text 部分正在工作，但我无法访问“.item”子元素的键和值。我尝试了children[0]、[0]['src']、[:src]、attr()、attribute() 等等。

我完全没有想法和 Google 搜索页面。

【问题讨论】：

欢迎来到 Stack Overflow。请避免使用称呼（“嗨，我是 Ruby 和 nokogiri 的新手。”）、告别辞或签名。 Stack Overflow 不是对话，而是写关于如何解决问题的文章。

标签： css ruby nokogiri

【解决方案1】：

我会这样做：

doc = Nokogiri::HTML(<<EOT)
<html><body>
    <div class="item">
        <a href="//external-link.com">
            <img src="main-image1.jpg" alt=""/>
        </a>
        <h2> Title1 </h2>
    </div>
    <div class="item">
        <a href="//external-link.com">
            <img src="main-image2.jpg" alt=""/>
        </a>
        <h2> Title2 </h2>
    </div>
    <div class="item">
        <a href="//external-link.com">
            <img src="main-image3.jpg" alt=""/>
        </a>
        <h2> Title3 </h2>
    </div>
</body></html>
EOT

items = doc.search('.item').map { |item|
  {
    title: item.at('h2').text,
    src: item.at('img')['src']
  }
}

结果：

items
# => [{:title=>" Title1 ", :src=>"main-image1.jpg"},
#     {:title=>" Title2 ", :src=>"main-image2.jpg"},
#     {:title=>" Title3 ", :src=>"main-image3.jpg"}]

我故意只从<img> 标记中获取“src”属性。鉴于上面的代码，您可以弄清楚如何从 <a> 标签中获取您想要的内容。

请注意，我使用的是通用 search 而不是 css。 Nokogiri 足够聪明，可以在大多数情况下区分 CSS 和 XPath 选择器。我唯一一次使用css 或xpath 是在Nokogiri 无法弄清楚的时候。我使用 CSS 是因为它通常更简单且更易于阅读。

另外，请注意我没有使用node.css('h2').text。 css 返回一个类似于 Array 的 NodeSet，而 at 返回单个 Node。在您的代码中，您掩盖了两者之间的区别，但使用css、xpath 或通用search 是一个等待中的错误。考虑一下：

require 'nokogiri'

doc = Nokogiri::HTML(<<EOT)
<html><body>
  <p>foo</p>
  <p>bar</p>
  <p>baz</p>
</body></html>
EOT

doc.search('p').text # => "foobarbaz"
doc.at('p').text # => "foo"

这意味着，如果search 或其特定方法之一返回一个NodeSet，text 将返回该集中所有节点的文本，这很少是您想要的。相反，您需要使用at 来查找您想要的特定子节点，然后提取其文本。你如何做到这一点是一个不同的问题，但很容易做到。

【讨论】：