1

Nokogiriを使用して、Webページ<img>の最初のタグに最も近い最初の画像を取得しようとしています。<p>結果を使用して、Facebook共有リンクの記事の概要を表示します。

記事の最初のタグを取得するために使用しているコード<p>は次のとおりです。

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

2 に答える 2

2

<img>の中にある最初のものを見つけてください<p>

<p>要素をまだ持っていない/必要としない場合は、次のいずれかを行います。

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

at_cssまたはの代わりに、またはat_xpath単に使用atして、文字列がCSSまたはXPath式であるかどうかをNokogiriに認識させることができることに注意してください。

<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')

ただし、これらの回答では（最初の2つとは異なり）、最初のpに画像がない場合、画像はまったく見つかりません。

<img>ドキュメントの最初のものを見つけます

本当に最初の場所（、、または最初の<img>場所にない可能性があります）が必要な場合は、次のようにします。<p><p>

first_image = doc.at('img')

ドキュメントの前のどこかに少なくとも1つの画像が含まれている<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 に答える