태그

2017-01-01 3 views
0

내가 켜 노코 기리를 사용하려고했다 IMG에서 모든 속성을 추출하는 방법 :태그

<img class="img-responsive" src="img/logologo.png" 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 + '\')%>' 

이가 : 여기

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

내 코드입니다 하드 코드처럼, 모든 속성과 src를 추출 할 수있는 방법이 있습니까?

이미지 태그는 height 또는 width 매개 변수를 포함 할 수 있습니다. 자동으로 모든 속성을 추출하여 ERB로 만드는 방법은 무엇입니까?

+0

왜 하드 코드 속성을 가진'image_tag'에 정적'img' HTML 태그를 번역 하시겠습니까? 달성하려는 것은 무엇입니까? – spickermann

+0

'erb' 페이지를 만들 때, 레일스 애셋 파이프 라인 때문에' '을 변환해야합니다. 프론트 엔드 파트너는'erb '대신'html'을 쓰는 방법 만 알고 있습니다. –

답변

0

를 사용하여 다음 코드는 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 
+0

고마워, 알았다. –

0

확인에 작업 할 일이 많이있다. HTML을 파싱하는 방법부터 시작해 보겠습니다. 당신이 조각 또는 단일 태그를 구문 분석하고있는 모든, 당신은 보통의 HTML 태그를 추가하지 노코 기리에게 DocumentFragment가 사용할 수있는 경우 대신

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 및 그 변형은 반환 된 노드 집합에서 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: '') %>"