我想从标签中提取所有 HTML5 数据属性，就像这个 jQuery 插件 http://www.orangesoda.net/jquery.dataset.html.

例如，给定：

<span data-age="50" data-location="London" class="highlight">Joe Bloggs</span>

我想得到一个像这样的哈希值：

{ 'data-age' => '50', 'data-location' => 'London' }

我最初希望使用通配符作为我的 CSS 选择器的一部分，例如

Nokogiri(html).css('span[@data-*]').size

但似乎不支持。

选项 1：获取所有数据元素

如果您需要的只是列出页面的所有数据元素，那么这里有一行：

Hash[doc.xpath("//span/@*[starts-with(name(), 'data-')]").map{|e| [e.name,e.value]}]

Output:

{"data-age"=>"50", "data-location"=>"London"}

选项 2：按标签对结果进行分组

如果您想按标签对结果进行分组（也许您需要对每个标签进行额外的处理），您可以执行以下操作：

tags = []
datasets = "@*[starts-with(name(), 'data-')]"

#If you want any element, replace "span" with "*"
doc.xpath("//span[#{datasets}]").each do |tag|
    tags << Hash[tag.xpath(datasets).map{|a| [a.name,a.value]}]
end

Then tags是一个包含键值哈希对的数组，按标签分组。

选项 3：类似于 jQuery 数据集插件的行为

如果您更喜欢类似插件的方法，下面将为您提供dataset每个 Nokogiri 节点上的方法。

module Nokogiri
  module XML
    class Node
      def dataset
        Hash[self.xpath("@*[starts-with(name(), 'data-')]").map{|a| [a.name,a.value]}]
      end
    end
  end
end

然后您可以找到单个元素的数据集：

doc.at_css("span").dataset

或者获取一组元素的数据集：

doc.css("span").map(&:dataset)

Example:

以下是该人的行为dataset方法同上。给定 HTML 中的以下几行：

<span data-age="50" data-location="London" class="highlight">Joe Bloggs</span>
<span data-age="40" data-location="Oxford" class="highlight">Jim Foggs</span>

输出将是：

[
 {"data-location"=>"London", "data-age"=>"50"},
 {"data-location"=>"Oxford", "data-age"=>"40"}
]