66
57

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

railsでtext_areaで入力したまま表示する(改行、段落)

Last updated at Posted at 2019-11-08

form_forやform_withなどのtext_areaのフォームに文字を入力した際、

  • 改行
  • 段落

などつけて入力したのに、いざ表示させると改行も段落もない・・ということみなさん多いと思います(初心者だけでしょうか?)
railsヘルパーの「simple_format」を使っても、行の改行は反映されるけど、

  • 連続した改行(空白のままの改行)
  • 段落(スペースキーで1文字分の空白を作る)

は反映されません(と思います)
少なくとも私は反映されませんでした

rails初心者の私も先ほどまで、どうすればいいのかわからずググっていたら解決法がありましたので、ご紹介しようと思いますが、まだよく理解はできてないので、詳しく知りたい方は下記のリンクをご覧ください。

以下参考にしたサイト
https://www.ryotaku.com/entry/2019/06/25/%E3%80%8Csimple_format%E3%80%8D%E3%82%84%E3%80%8Csafe_join%E3%80%8D%E3%82%92%E4%BD%BF%E3%81%A3%E3%81%A6%E3%80%81%E6%AD%A3%E5%B8%B8%E3%81%AB%E6%94%B9%E8%A1%8C%E8%A1%A8%E7%A4%BA%E3%81%95%E3%81%9B

結論
 「safe_join」を使おう!

どういうことかというと、例として以下のようにtext_areaを作成します

new.html.erb
<%form_with model: @novel, local:true do |f|%>
<%=f.label :テキストを入力してください%>
<%=f.text_area :text %>
<%=f.submit "登録する"%>
<%end%>

で、これで作成したフォームに、

1(1段改行)
2(2段改行)

 3(先頭に1文字分スペースを追加)

と例として入力してみます

show.html.erb
<%=simple_format(@text)%>

と表示すると、

1(1段改行)
2(2段改行)
3(先頭に1文字分スペースを追加)

と表示されてしまいます。
2段改行は1段しか改行されておらず、段落もなくなってしまいます
(simple_formatは、一応連続した改行にも何かしらの処理は働いてるらしいのですが、こちらの意図する形の表現にはなってくれませんでした)

ここで、safe_joinの登場です

show.html.erb
<%=simple_format(@text)%>
⬇️こう書き換える
<%=safe_join(@text.split("\n"),tag(:br))%>

すると、改行も段落も反映することができました!

なぜ反映されるかはよくわかりませんが・・

simple_formatは、文字列を自動的に<p>で括られるそうですが、safe_joinを使用すると<p>を無視することができるそうです

なにはともあれ、表示できてよかったです

※ 追記
  半角でのスペースは反映されませんでした。
  どなたかわかる方がいらっしゃればご教示願います・・

66
57
2

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
66
57

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?