如何從IMG標記

我試圖用引入nokogiri把提取出所有屬性：如何從IMG標記

<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？

來源

2017-01-01 Coda Chang

爲什麼你要一個靜態的'img' HTML標記翻譯成'image_tag'與會有限制屬性？你想達到什麼目的？ – spickermann

當我開發'erb'頁面時，由於rails資產管道，我需要轉換''。我的前端合作伙伴只知道如何編寫'html'而不是'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

來源

2017-01-01 16:29:54 vlasiak

謝謝，我明白了。 –

OK，有很多事情去努力。讓我們從你如何解析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返回一個節點集是顯著有所爲記。 at及其變體相當於在返回的NodeSet上使用first或[0]，返回第一個節點，因此使用at和朋友，如果這就是您的意思，因爲它會導致代碼不那麼嘈雜。

這是我怎麼會去一下吧：

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: '') %>"

來源

2017-01-06 00:56:34

如何從IMG標記

回答

相關問題