从标记中提取HTML5数据属性 [英] Extracting HTML5 data attributes from a tag

问题描述

我想从标记中提取所有HTML5数据属性，就像此jQuery插件.

I want to extract all the HTML5 data attributes from a tag, just like this jQuery plugin.

例如，给定:

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

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

I want to get a hash like:

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

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

I was originally hoping use a wildcard as part of my CSS selector, e.g.

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

但似乎不支持.

推荐答案

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

如果您只需要列出页面的所有数据元素，那么这是一个单行代码:

Option 1: Grab all data elements

If all you need is to list all the page's data elements, here's a one-liner:

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

输出:

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

选项2:按标签分组结果

如果要按标签对结果进行分组(也许需要对每个标签进行其他处理)，则可以执行以下操作:

Option 2: Group results by tag

If you want to group your results by tag (perhaps you need to do additional processing on each tag), you can do the following:

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

然后 tags 是一个数组，其中包含按标签分组的键值哈希对.

Then tags is an array containing key-value hash pairs, grouped by tag.

如果您喜欢类似插件的方法，则以下内容将为您在每个Nokogiri节点上提供一个 dataset 方法.

If you'd prefer the plugin-like approach, the following will give you a dataset method on every Nokogiri node.

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

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

Then you can find the dataset for a single element:

doc.at_css("span").dataset

或获取一组元素的数据集:

Or get the dataset for a group of elements:

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

示例:

以下是上面的 dataset 方法的行为.在HTML中给出以下几行:

The following is the behavior of the dataset method above. Given the following lines in the 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"}
]

这篇关于从标记中提取HTML5数据属性的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！