使用 Nokogiri 的 CSS 方法获取 alt 标签中的所有元素 [英] Using Nokogiri's CSS method to get all elements within an alt tag

查看：58
本文介绍了使用 Nokogiri 的 CSS 方法获取 alt 标签中的所有元素的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我正在尝试使用 Nokogiri 的 CSS 方法从我的 HTML 中获取一些名称.

这是一个 HTML 示例:

<div><div><a id="技术"></a><h4 class="center-align">团队</h4>

<div class="consultant list-across wrap"><div class="工程"><img class="" src="https://v0001.jpg" alt="Person 1"/><p>Person 1<br>创始人、董事长&amp;首席技术官

<div class="工程"><img class="" src="https://v0002.png" alt="Person 2"/></a><p>Person 2<br>创始人，工程副总裁</p>

<div class="product"><img class="" src="https://v0003.jpg" alt="Person 3"/></a><p>Person 3<br>产品</p>

<div class="人力资源和管理"><img class="" src="https://v0004.jpg" alt="Person 4"/></a><p>人物 4<br>人物 &amp;地点

<div class="alliances"><img class="" src="https://v0005.jpg" alt="Person 5"/></a><p>Person 5<br>联盟副总裁</p>

到目前为止，我在 people.rake 文件中的内容如下:

 staff_site = Nokogiri::HTML(open("https://www.website.com/company/team-all"))all_hands = staff_site.css("div.consultant").map(&:text).map(&:squish)

我在获取 alt="" 标记(人名)中的所有元素时遇到了一些麻烦，因为它嵌套在几个 div 下.

目前，使用div.consultant，它得到所有的名字+角色，即Person 1Founder，主席；CTO，而不仅仅是 alt= 中的人名.

我怎样才能简单地获取 alt 中的元素?

解决方案

您想要的输出不清晰且 HTML 已损坏.

从这个开始:

需要'nokogiri'doc = Nokogiri::HTML('<html><body><div class="consultant"><img alt="foo"/><img alt="bar"/</div>')doc.search('div.consultant img').map{ |img|img['alt'] } # =>["foo", "bar"]

在 css 的输出上使用 text 不是一个好主意.css 返回一个 NodeSet.针对 NodeSet 的 text 导致所有文本都被连接起来，这通常会导致文本内容错乱，迫使您弄清楚如何再次将其分开，这最终是可怕的代码:

doc = Nokogiri::HTML('<html><body><p>foo</p><p>bar</p></body></html>')doc.search('p').text # =>foobar"

此行为记录在 NodeSet#text:

<块引用>

获取所有包含的 Node 对象的内部文本

相反，使用 text(AKA inner_text 或 content)针对单个节点，生成该节点的确切文本，然后您可以根据需要加入:

<块引用>

返回此节点的内容

doc.search('p').map(&:text) # =>["foo", "bar"]

参见如何避免从抓取时的节点"也是.

I am trying to use Nokogiri's CSS method to get some names from my HTML.

This is an example of the HTML:

<section class="container partner-customer padding-bottom--60">
    <div>
        <div>
            <a id="technologies"></a>
            <h4 class="center-align">The Team</h4>
        </div>
    </div>
    <div class="consultant list-across wrap">
        <div class="engineering">
            <img class="" src="https://v0001.jpg" alt="Person 1"/>
            <p>Person 1<br>Founder, Chairman &amp; CTO</p>
        </div>
        <div class="engineering">
            <img class="" src="https://v0002.png" alt="Person 2"/></a>
            <p>Person 2<br>Founder, VP of Engineering</p>
        </div>
        <div class="product">
            <img class="" src="https://v0003.jpg" alt="Person 3"/></a>
            <p>Person 3<br>Product</p>
        </div>
        <div class="Human Resources &amp; Admin">
            <img class="" src="https://v0004.jpg" alt="Person 4"/></a>
            <p>Person 4<br>People &amp; Places</p>
        </div>
        <div class="alliances">
            <img class="" src="https://v0005.jpg" alt="Person 5"/></a>
            <p>Person 5<br>VP of Alliances</p>
        </div>

What I have so far in my people.rake file is the following:

  staff_site = Nokogiri::HTML(open("https://www.website.com/company/team-all"))
  all_hands = staff_site.css("div.consultant").map(&:text).map(&:squish)

I am having a little trouble getting all elements within the alt="" tag (the name of the person), as it is nested under a few divs.

Currently, using div.consultant, it gets all the names + the roles, i.e. Person 1Founder, Chairman; CTO, instead of just the person's name in alt=.

How could I simply get the element within alt?

解决方案

Your desired output isn't clear and the HTML is broken.

Start with this:

require 'nokogiri'

doc = Nokogiri::HTML('<html><body><div class="consultant"><img alt="foo"/><img alt="bar" /></div></body></html>')
doc.search('div.consultant img').map{ |img| img['alt'] } # => ["foo", "bar"]

Using text on the output of css isn't a good idea. css returns a NodeSet. text against a NodeSet results in all text being concatenated, which often results in mangled text content forcing you to figure out how to pull it apart again, which, in the end, is horrible code:

doc = Nokogiri::HTML('<html><body><p>foo</p><p>bar</p></body></html>')
doc.search('p').text # => "foobar"

This behavior is documented in NodeSet#text:

Get the inner text of all contained Node objects

Instead, use text (AKA inner_text or content) against the individual nodes, resulting in the exact text for that node, that you can then join as you want:

Returns the content for this Node

doc.search('p').map(&:text) # => ["foo", "bar"]

See "How to avoid joining all text from Nodes when scraping" also.

这篇关于使用 Nokogiri 的 CSS 方法获取 alt 标签中的所有元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
前端开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆