Ruby 解析图像url nokogiri

我需要从HTML中解析图像URL，如下所示：

<p><a href="http://blog.website.com/wp-content/uploads/2012/02/image_name.jpg" ><img class="aligncenter size-full wp-image-12313" alt="Example image Name" src="http://blog.website.com/wp-content/uploads/2012/02/image_name.jpg" width="630" height="119" /></a></p>

我有两个问题：

如何解析图像url

理想情况下，我会以以下格式打印到控制台：

1. 标题1 图1 图2（如有） 2. 标题2 2图像url 1 2图像url 2（如有） 到目前为止，我还不能用这种漂亮的格式打印我的标题。我怎样才能做到

<h2><a href="http://blog.website.com/2013/02/15/images/" rel="bookmark" title="Permanent Link to Blog Post">Blog Post</a></h2>
          <p class="post_author"><em>by</em> author</p>
          <div class="format_text">
    <p style="text-align: left;">Blog Content </p>
<p style="text-align: left;"> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </p>
<p style="text-align: center;"><a href="http://blog.website.com/wp-content/uploads/2012/02/image21.jpg" ><img class="alignnone size-full wp-image-23382" alt="image2" src="http://blog.website.com/wp-content/uploads/2012/02/image21.jpg" width="630" height="210" /></a></p>
<p style="text-align: left;">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </p>
<p style="text-align: center;"><b id="internal-source-marker_0.054238131968304515">Items: <a href="http://www.website.com/threads?src=login#/show/thread/A_abvaf812e3"  target="_blank">Items for Spring</a></b></p>
<p style="text-align: center;">Lorem Ipsum.</p>
<p style="text-align: center;"><b id="internal-source-marker_0.054238131968304515">More Items: <a href="http://www.website.com/threads#/show/thread/A_abv2a6822e2"  target="_blank">Lorem Ipsum</a></b></p>
<p style="text-align: center;">Lorem Ipsum.</p>
<p style="text-align: center;"><b id="internal-source-marker_0.054238131968304515">Still more items: <a href="http://www.website.com/threads#/show/thread/A_abv7af882e3"  target="_blank">Items:</a></b></p>
<p style="text-align: center;">Lorem Ipsum.</p>
<p style="text-align: center;"><b id="internal-source-marker_0.054238131968304515">Lorem ipsum: <a href="http://www.website.com/threads?src=login#/show/thread/A_abvea6832e8"  target="_blank">Items</a></b></p>
<p style="text-align: center;">Lorem Ipusm</p>
<p style="text-align: center;"><b id="internal-source-marker_0.054238131968304515">
        </div>  
          <p class="to_comments"><span class="date">February 15, 2013</span> &nbsp; <span class="num_comments"><a href="http://blog.website.com/2013/02/15/Blog-post/#respond" title="Comment on Blog Post">No Comments</a></span></p>

作者
博客内容

洛伦·伊普苏姆·多洛·塞特·塞特·阿迪皮西奇·艾利特（Lorem ipsum Door sit amet），他是一位杰出的领袖，在劳动和生活的暂时性冲突中获胜。但是，在最低限度上，我们需要一个实验室来进行日常工作

洛伦·伊普苏姆·多洛·塞特·塞特·阿迪皮西奇·艾利特（Lorem ipsum Door sit amet），他是一位杰出的领袖，在劳动和生活的暂时性冲突中获胜。但是，在最低限度上，我们需要一个实验室来进行日常工作
项目：

Lorem Ipsum

更多项目：

Lorem Ipsum

还有更多项目：

Lorem Ipsum

Lorem ipsum:

Lorem Ipusm


2013年2月15日

要获取图像，只需查找带有

src

属性的

img

标记即可

如果要将

h2

与每个图像关联，可以执行以下操作：

doc.xpath('//img').each do |img|
  puts "Header: #{img.xpath('preceding::h2[1]').text}"
  puts "  Image: #{img['src']}"
end

请注意，切换到XPath是为了前面的：轴

编辑

要按标题分组，可以将它们放入哈希中：

headers = Hash.new{|h,k| h[k] = []}
doc.xpath('//img').each do |img|
  header = img.xpath('preceding::h2[1]').text
  image = img['src']
  headers[header] << image
end

---

我认为首先按h2分组更有意义：

doc.search('h2').each_with_index do |h2, i|
  puts "#{i+1}."
  puts h2.text
  h2.search('+ p + div > p[3] img').each do |img|
    puts img['src']
  end
end

---

我最终使用的代码。请随意评论（我可能会从中学习）：

---

我曾经做过类似的事情（实际上我想要完全相同的输出）。此解决方案非常容易遵循：

根据DOM的结构，您可以执行以下操作：

body = page.css('div.format_text')
headers = page.css('div#content_inner h2 a')
post_counter = 1

body.each_with_index do |body,index| 
   header = headers[index]
   puts "#{post_counter}. " + header
   body.css('p a img, div > img').each{|img| puts img['src'] if img['src'].match(/\Ahttp/) }
   post_counter += 1
end

所以基本上，你要用一个或多个图像检查每个标题。我正在解析的页面的标题在image div之外，这就是为什么我使用两个不同的变量来查找它们（body/headers）。另外，在查找图像时，我针对两个类，因为这是这个特定DOM的结构方式

这会给你一个你想要的干净的输出

---

希望这有帮助

可能重复的示例HTML将有助于解决问题中要将图像与其标题关联的部分。我添加了一些示例HTML（添加了lorem ipsums并隐藏了网站）。我希望解析第三个中的图像并将其与标题关联。我在答案中包含了我最终使用的代码。酷，有没有与“previous”相反的方法？比如说下面？这很有帮助，但实际上我对相反的东西感兴趣。标题，然后是以下图像。有没有一种方法可以使用与您提供的技术相近的技术来实现这一点？我尝试过：doc.xpath（'//h2/a[@rel=“bookmark”]”）。每个do | header |放置“header:#{header.text}”放置“Image:#{header.xpath（'following:：img[1]'）][src']}”结尾，但我得到一个“无法将字符串转换为整数（TypeError）”不，你不能做相反的事情，因为不管中间是否有

h2

，你都可以得到所有的图像。你仍然可以按照我在每个标题下显示和分组图像的方式来做。当我编写代码时，上面的两条注释会将“Image 1:#{header.xpath（'following:：img[1]”放到}“我知道这不会得到所有的图像；只有在他的一个例子中所示的精确结构中的那些。这就是他所要求的。好吧，他没有一个“图片url 2（如果有的话）”可以出现的例子。他特别提到第三页。但这没关系，它很容易调整以适应情况。这可以调整以适应下一个

h2

之前的任何图像吗？我试图找到一种方法，我唯一想到的是我发布的由内而外的解决方案。不，

following:：img

将拾取一个超过下一个h2的图像，[0][“src”]如果不存在，将导致错误。此外，尽可能使用css。此代码适用于我正在使用的网页，而您提供的代码省略了一些图像（尽管经过一些调整，我相信它会起作用）。我确信这是因为您没有完整的信息。以下原因：：img[1]没有跳过h2是因为存在类似facebook的图像，如img[0]，我不关心这些。幸运的是，整个页面的格式是一致的。

headers.each do |h,urls|
  puts "#{h} #{urls.join(' ')}"
end

doc.search('h2').each_with_index do |h2, i|
  puts "#{i+1}."
  puts h2.text
  h2.search('+ p + div > p[3] img').each do |img|
    puts img['src']
  end
end

require 'rubygems'
require 'nokogiri'

doc = Nokogiri::HTML(open("http://blog.website.com/"))

doc.xpath('//h2/a[@rel = "bookmark"]').each_with_index do |header, i|
  puts i+1
  puts " Title: #{header.text}"
  puts "  Image 1: #{header.xpath('following::img[1]')[0]["src"]}"
  puts "  Image 2: #{header.xpath('following::img[2]')[0]["src"]}"
end

body = page.css('div.format_text')
headers = page.css('div#content_inner h2 a')
post_counter = 1

body.each_with_index do |body,index| 
   header = headers[index]
   puts "#{post_counter}. " + header
   body.css('p a img, div > img').each{|img| puts img['src'] if img['src'].match(/\Ahttp/) }
   post_counter += 1
end