如何从 img 标签中提取所有属性

我试图使用Nokogiri来转动：

<img class="img-responsive" src="img/logologo.png" alt="">

自：

<%= image_tag('img/logologo.png', :class => 'img-responsive', :alt => '') %>

这是我的代码：

# a = <img class="img-responsive" src="img/logologo.png" alt="" width="256" height="256"> 
page = Nokogiri::HTML(a)
img = page.css('img')[0]
src =  ""
alt =  ""
class_atr = ""
src =  img['src'] if img['src'].present?
alt =  img['alt'] if img['alt'].present?
class_atr = img['class'] if img['class'].present?
result = "<%= image_tag('" + src + '', :class => '' + class_atr + '', :alt => '' + alt + '')%>'

这有点像硬代码，有没有办法提取所有属性及其 src？

图像标记可能包含height或width参数。如何自动提取所有属性并制作到ERB中？

使用以下代码循环访问 HTML 标记中的所有<img>标记并获取其属性：

page = Nokogiri::HTML <<-html
    <img class="img-responsive1" src="img/logologo.png" alt="" width="256" height="256">
    <a href="#">A tag</a>
    <img class="img-responsive2" src="logologo222.png">
html
page.css('img').each do |img_node|
    img_attributes = img_node.attributes.values # list of image attributes
    # e.g., to output key-value pairs:
    img_attributes.each do |attr|
        p [attr.name, attr.value]
    end
end

好的，有很多事情要做。让我们从如何解析 HTML 开始。如果您所做的只是解析代码段或单个标签，您可以使用 DocumentFragment 告诉 Nokogiri 不要添加通常的 HTML 标签：

require 'nokogiri'
doc = Nokogiri::HTML('<img class="img-responsive" src="img/logologo.png" alt="">')
doc.to_html # => "<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" "http://www.w3.org/TR/REC-html40/loose.dtd">n<html><body><img class="img-responsive" src="img/logologo.png" alt=""></body></html>n"

相反，您可以执行以下操作：

doc = Nokogiri::HTML::DocumentFragment.parse('<img class="img-responsive" src="img/logologo.png" alt="">')
doc.to_html # => "<img class="img-responsive" src="img/logologo.png" alt="">"

接下来，当你的意思是at、at_css或at_xpath时，不要使用css、xpath或search。思考一下：

doc.css('img').class # => Nokogiri::XML::NodeSet
doc.at('img').class # => Nokogiri::XML::Element
doc.css('img')[0].to_html # => "<img class="img-responsive" src="img/logologo.png" alt="">"
doc.css('img').first.to_html # => "<img class="img-responsive" src="img/logologo.png" alt="">"
doc.at('img').to_html # => "<img class="img-responsive" src="img/logologo.png" alt="">"

css、xpath和search返回一个 NodeSet 是重要的，需要记住一些事情。 at及其变体等效于在返回的 NodeSet 上使用 first 或 [0]，返回第一个节点，因此，如果这是您的意思，请使用 at 和 friends，因为它会导致代码不那么嘈杂。

以下是我的做法：

require 'nokogiri'
doc = Nokogiri::HTML::DocumentFragment.parse('<img class="img-responsive" src="img/logologo.png" alt="">')
img = doc.at('img')
img_src = img.delete('src')
img_params = img.map { |p, v| ":%s => '%s'" % [p, v] }.join(', ') 
# => ":class => 'img-responsive', :alt => ''"
img_template = "<%%= image_tag('%s', %s) %%>" % [img_src, img_params]  
# => "<%= image_tag('img/logologo.png', :class => 'img-responsive', :alt => '') %>"

当然，对键/值使用:k => "v"格式是老派的。我建议更改为：

img_params = img.map { |p, v| "%s: '%s'" % [p, v] }.join(', ') # => "class: 'img-responsive', alt: ''"

这导致：

"<%= image_tag('img/logologo.png', class: 'img-responsive', alt: '') %>"

相关内容

最新更新

热门标签：