1

我正在尝试使用 Nokogiri获取<img>最接近网页第一个标签的第一个图像。<p>我将使用结果在 Facebook 分享链接中显示文章概要。

我用来获取<p>文章第一个标签的代码如下：

doc = Nokogiri::HTML(open(@url))
@title = doc.css('title').text
@content = doc.css('p').first
4

2 回答 2

2

找到第一个<img>在 a 中的<p>

如果您还没有/不需要该<p>元素，则：

first_img_in_p = doc.at_css('p img')
first_img_in_p = doc.at_xpath('//p//img')

请注意，如果它是 CSS 或 XPath 表达式，您可以使用并让 Nokogiri 从字符串中找出而不是at_cssor 。at_xpathat

找到第一个<img>里面的第一个 <p>

如果您已经拥有父节点，则可以使用以下任一方法：

first_p     = doc.at('p')  # Better than finding all <p> and then reducing
first_image = first_p.at_css('img')
first_image = first_p.at_xpath('.//img')

但是，有了这些答案（与前两个不同），如果第一个 p 没有图像，您将根本找不到任何图像。

<img>在文档中找到第一个

如果您真的只想要第一个<img>（可能不在 a<p>或 first中<p>），那么只需执行以下操作：

first_image = doc.at('img')

如果您想要第一个图像至少<p>在文档中某个位置出现，但不一定作为<img>...的包装器，那么请这样说，我可以进一步编辑答案。

找到第<img>一个<p>在它之前（或作为祖先）

编辑：根据您在下面的评论，我认为您想要：

img = doc.at_xpath('//img[preceding::p or ancestor::p]')

<img>这表示“在文档中查找第一个在它之前<p>某处发生的（但不是祖先），或者作为祖先的。”<p>

以下是一些测试用例，因此您可以决定这是否是您想要的：

require 'nokogiri'
[
  %Q{<r><p><img id="a"/></p></r>},
  %Q{<r><img id="z"/><p></p></r>},
  %Q{<r><img id="z"/><p><img id="a"/></p></r>},
  %Q{<r><img id="z"/><p></p><p><img id="a"/></p></r>},
  %Q{<r><p></p><p><img id="a"/></p></r>},
  %Q{<r><img id="z"/><p></p><p><img id="a"/></p></r>},
  %Q{<r><p></p><img id="a"/></r>},
  %Q{<r><img id="z"/><p></p><img id="a"/></r>},
  %Q{<r><p></p><b><c><img id="a"/></c></b></r>},
  %Q{<r><q><p></p></q><b><c><img id="a"/></c></b></r>},
  %Q{<r><p><img id="a"/></p><img id="z"/></r>},
  %Q{<r><p><img id="a"/></p><p><img id="z"/></p></r>},
].each do |xml|
  doc = Nokogiri.XML(xml)
  img = doc.at_xpath('//img[preceding::p or ancestor::p]')
  puts "%-50s %s" % [ xml, img||NONE ]
end

#=> <r><p><img id="a"/></p></r>                        <img id="a"/>
#=> <r><img id="z"/><p></p></r>                        NONE
#=> <r><img id="z"/><p><img id="a"/></p></r>           <img id="a"/>
#=> <r><img id="z"/><p></p><p><img id="a"/></p></r>    <img id="a"/>
#=> <r><p></p><p><img id="a"/></p></r>                 <img id="a"/>
#=> <r><img id="z"/><p></p><p><img id="a"/></p></r>    <img id="a"/>
#=> <r><p></p><img id="a"/></r>                        <img id="a"/>
#=> <r><img id="z"/><p></p><img id="a"/></r>           <img id="a"/>
#=> <r><p></p><b><c><img id="a"/></c></b></r>          <img id="a"/>
#=> <r><q><p></p></q><b><c><img id="a"/></c></b></r>   <img id="a"/>
#=> <r><p><img id="a"/></p><img id="z"/></r>           <img id="a"/>
#=> <r><p><img id="a"/></p><p><img id="z"/></p></r>    <img id="a"/>
于 2012-05-02T15:47:59.780 回答
0

如果你正在寻找一个 img 的兄弟姐妹。@content.parent.css('>img')

于 2012-05-02T14:00:44.290 回答