railsでtextareaで入力した改行や空白をビューに反映させる方法【safe_join】

はじめに

railsでtextareaを使って比較的長い文章を入力してもらったとき、

それをビューで表示しようとすると、改行も空白も無視されてすごく読みづらくなってしまったので、

その対処法についてご紹介します。

問題点

例えば、下記のようなtextareaがあったとします。

<%= form_with model: @test, local: true do |f| %>
    <div class="form-group">
      <%= f.label :text %>
      <%= f.text_area :text, class: 'form-control' %>
    </div>
    <div class="actions">
      <%= f.submit '登録', class: 'btn btn-primary' %>
    </div>
<% end %>

このフォームに下記のような文章を入力するとします。

こんにちは。
# 1行空ける
僕は、田中太郎です。

# 2行空ける
　よろしくお願いします。　# 先頭に空白を空ける

上記の文章をビューで表示しようとすると、

<%= @test.text %>

↓　↓　↓

こんにちは。僕は、田中太郎です。よろしくお願いします。

上記のように、改行も空白も無視されて表示されてしまいます。

これぐらいの文章量ならば問題ありませんが、

もう少し長文になると非常に読みづらくなってしまいます。

解決法

解決するには、safe_joinというヘルパーメソッドを使うことです。

<%= safe_join(@test.text.split("\n"), tag(:br)) %>

safe_joinを使うことで、rubyの改行コードの\nをhtmlの<br>タグに変換してくれます。

なので、先程の文章もきちんと表示されます。

<%= safe_join(@test.text.split("\n"), tag(:br)) %>

↓　↓　↓

こんにちは。

僕は、田中太郎です。


　よろしくお願いします。

注意点

注意点として、半角スペースは反映されないようです。