Ruby on Rails: how to render a string as HTML?

HtmlRuby on-RailsRubyString

Html Problem Overview


I have

@str = "<b>Hi</b>"

and in my erb view:

<%= @str %>

What will display on the page is: <b>Hi</b> when what I really want is Hi. What's the ruby way to "interpret" a string as HTML markup?


Edit: the case where

@str = "<span class=\"classname\">hello</span>"

If in my view I do

<%raw @str %>

The HTML source code is <span class=\"classname\">hello</span> where what I really want is <span class="classname">hello</span> (without the backslashes that were escaping the double quotes). What's the best way to "unescape" those double quotes?

Html Solutions


Solution 1 - Html

UPDATE

For security reasons, it is recommended to use sanitize instead of html_safe.

<%= sanitize @str %>

What's happening is that, as a security measure, Rails is escaping your string for you because it might have malicious code embedded in it. But if you tell Rails that your string is html_safe, it'll pass it right through.

@str = "<b>Hi</b>".html_safe
<%= @str %>

OR

@str = "<b>Hi</b>"
<%= @str.html_safe %>

Using raw works fine, but all it's doing is converting the string to a string, and then calling html_safe. When I know I have a string, I prefer calling html_safe directly, because it skips an unnecessary step and makes clearer what's going on. Details about string-escaping and XSS protection are in this Asciicast.

Solution 2 - Html

Use raw:

<%=raw @str >

But as @jmort253 correctly says, consider where the HTML really belongs.

Solution 3 - Html

If you're on rails which utilizes Erubis — the shortest way to do it is

<%== @str >

Note the double equal sign. See related question on SO for more info.

Solution 4 - Html

You can also use simple_format(@str) which removes malicious code. Read more here: http://api.rubyonrails.org/classes/ActionView/Helpers/TextHelper.html#method-i-simple_format

Solution 5 - Html

You are mixing your business logic with your content. Instead, I'd recommend sending the data to your page and then using something like JQuery to place the data where you need it to go.

This has the advantage of keeping all your HTML in the HTML pages where it belongs so your web designers can modify the HTML later without having to pour through server side code.

Or if you're not wanting to use JavaScript, you could try this:

@str = "Hi"

<b><%= @str ></b>

At least this way your HTML is in the HTML page where it belongs.

Solution 6 - Html

Or you can try CGI.unescapeHTML method.

CGI.unescapeHTML "&lt;p&gt;This is a Paragraph.&lt;/p&gt;"
=> "<p>This is a Paragraph.</p>"

Solution 7 - Html

since you are translating, and picking out your wanted code from a person's crappy coded file, could you use content_tag, in combo with your regex's.

Stealing from the api docs, you could interpolate this translated code into a content_tag like:

<%= content_tag translated_tag_type.to_sym, :class => "#{translated_class}" do -%>
<%= translated_text %>
<% end -%>
# => <div class="strong">Hello world!</div>

Not knowing your code, this kind of thinking will make sure your translated code is too compliant.

Solution 8 - Html

>@str = "<span class=\"classname\">hello</span>" >If in my view I do > ><%raw @str %> >The HTML source code is <span class=\"classname\">hello</span> where what I really want is <span class="classname">hello</span> (without the backslashes that were escaping the double >quotes). What's the best way to "unescape" those double quotes?

Solution: use double quotes inside of single quotes (or single inside of double) to avoid escaping with a backslash.

@str = '<span class="classname">hello</span>'
<%raw @str %>

Solution 9 - Html

The html_safe version works well in Rails 4...

<%= "<center style=\"color: green; font-size: 1.1em\" > Administrators only </center>".html_safe if current_user.admin? %
>

Attributions

All content for this solution is sourced from the original question on Stackoverflow.

The content on this page is licensed under the Attribution-ShareAlike 4.0 International (CC BY-SA 4.0) license.

Content TypeOriginal AuthorOriginal Content on Stackoverflow
QuestionTimView Question on Stackoverflow
Solution 1 - HtmlJacobView Answer on Stackoverflow
Solution 2 - HtmlMichael StumView Answer on Stackoverflow
Solution 3 - HtmljibielView Answer on Stackoverflow
Solution 4 - HtmlbcackermanView Answer on Stackoverflow
Solution 5 - Htmljmort253View Answer on Stackoverflow
Solution 6 - HtmlArman OrtegaView Answer on Stackoverflow
Solution 7 - HtmlpjammerView Answer on Stackoverflow
Solution 8 - HtmlCrashView Answer on Stackoverflow
Solution 9 - HtmlG. A.View Answer on Stackoverflow