3

次のように、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>

これまでのところ、私はNokogiriを使用して<h2>、次のタグを解析しています。

require 'rubygems'
require 'nokogiri'
require 'open-uri'

page = Nokogiri::HTML(open("http://blog.website.com/"))
headers = page.css('h2')

puts headers.text

2つの質問があります：

  1. 画像のURLを解析するにはどうすればよいですか？
  2. 理想的には、次の形式でコンソールに印刷します。
1.1。
ヘッダー1
image_url 1
image_url 2（存在する場合）
 2.2。
ヘッダー2
2image_url 1
2image_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>
4

4 に答える 4

6

最初に 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
于 2013-02-20T07:41:14.173 に答える
5

画像を取得するには、属性imgを持つタグを探すだけです。src

各画像に関連付けたい場合は、次のh2ようにすることができます。

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

preceding::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

規定の出力を取得するには：

headers.each do |h,urls|
  puts "#{h} #{urls.join(' ')}"
end
于 2013-02-20T01:10:24.260 に答える
0

私が最終的に使用したコード。自由に批評してください（私はおそらくそこから学ぶでしょう）：

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
于 2013-02-22T01:26:13.277 に答える
0

私は一度似たようなことをしました（実際にはまったく同じ出力が必要でした）。この解決策は非常に簡単です。

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

したがって、基本的には、1 つ以上の画像を含むすべてのヘッダーをチェックしています。私が解析していたページには、画像 div の外側にヘッダーがありました。そのため、2 つの異なる変数 (body / headers) を使用してそれらを見つけました。また、この特定の DOM が構造化された方法であるため、画像を探すときに 2 つのクラスをターゲットにしました。

これにより、希望どおりのきれいな出力が得られるはずです。

お役に立てれば！

于 2013-10-23T00:02:20.067 に答える