Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Nokogiriを使ってHTMLを生成する方法

Nokogiriを使ってHTMLを生成する方法

例1: 単純なHTML

# HTML生成
root = Nokogiri::HTML::DocumentFragment.parse('')
Nokogiri::HTML::Builder.with(root) do |doc|
  doc.span '*', class: 'mark'
  doc.text '印の付いた項目は入力必須です。'
end

# 生成されたHTML
puts root.to_html
<span class="mark">*</span>印の付いた項目は入力必須です。

例2: ネストされたHTML

# HTML生成
root = Nokogiri::HTML::DocumentFragment.parse('')
Nokogiri::HTML::Builder.with(root) do |doc|
  doc.div(class: 'notes') do
    doc.span '*', class: 'mark'
    doc.text '印の付いた項目は入力必須です。'
  end
end

# 生成されたHTML
puts root.to_html
<div class="notes">
  <span class="mark">*</span>印の付いた項目は入力必須です。
</div>

例3: 何重にもネストされたHTML

# HTML生成
root = Nokogiri::HTML::DocumentFragment.parse('')
Nokogiri::HTML::Builder.with(root) do |doc|
  doc.div(id: 'message') do
    doc.div(class: 'box') do
      doc.span '*', class: 'mark'
      doc.text '印の付いた項目は入力必須です。'
    end
  end
end

# 生成されたHTML
puts root.to_html
<div id="message">
  <div class="box">
    <span class="mark">*</span>印の付いた項目は入力必須です。
  </div>
</div>

例4: sendメソッドを使ってネストされたHTMLを生成

# HTML生成
root = Nokogiri::HTML::DocumentFragment.parse('')
Nokogiri::HTML::Builder.with(root) do |doc|
  doc.send(:div, class: 'notes') do
    doc.span '*', class: 'mark'
    doc.text '印の付いた項目は入力必須です。'
  end
end

# 生成されたHTML
puts root.to_html
<div class="notes">
  <span class="mark">*</span>印の付いた項目は入力必須です。
</div>

例5: 生成済みのHTMLコードの断片を加える

# HTML生成
root = Nokogiri::HTML::DocumentFragment.parse('')
Nokogiri::HTML::Builder.with(root) do |doc|
  doc << "<span class='mark'>*</span>"
  doc.text '印のついた項目は入力必須です。'
end

# 生成されたHTML
puts root.to_html
<span class="mark">*</span>印のついた項目は入力必須です。
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment