This card describes different flavors for concatting HTML safe strings in a helper method in Rails. You might want to use the
tag
Show archive.org snapshot
helper instead of the
content_tag
Show archive.org snapshot
helper (the tag
helper knows all self closing tags).
We want to generate HTML like this:
<h1>Navigation</h1>
<ul>
<li>Left</li>
<li>Right</li>
</ul>
Below you can find multiple helper variants that generate this markup.
def navigation_with_html_safe
outer_html = ''.html_safe
outer_html << content_tag(:h1, 'Navigation')
outer_html << content_tag(:menu) do
inner_html = ''.html_safe
inner_html << content_tag(:li, 'Left')
inner_html << content_tag(:li, 'Right')
inner_html
end
outer_html
end
To prevent possible XSS vulnerabilites make sure to have a look at how to use html_safe correctly.
def navigation_with_plus
h1 = content_tag(:h1, 'Navigation')
menu = content_tag(:menu) do
content_tag(:li, 'Left') + content_tag(:li, 'Right')
end
h1 + menu
end
The plus operator can also be used in combination with the 'HTML safe' variant from above.
Important
This variant requires you to use
capture
to avoid unexpected output Show archive.org snapshot when using the helper
def navigation_with_concat
capture do
concat(content_tag(:h1, 'Navigation'))
concat(content_tag(:menu) do
concat(content_tag(:li, 'Left'))
concat(content_tag(:li, 'Right'))
end)
end
end
def navigation_with_safe_join
safe_join([
content_tag(:h1, 'Navigation'),
content_tag(:menu) do
safe_join([
content_tag(:li, 'Left'),
content_tag(:li, 'Right')
])
end
])
end