More than 3 years have passed since last update.

Railsでtext_areaに入力した文章を改行込で表示させる方法

Last updated at 2021-02-04Posted at 2021-01-13

はじめに

Ruby on Railsにて投稿機能のあるアプリを作成しました。
投稿画面にはRailsのヘルパーメソッドであるform_withメソッドを用いてフォームを実装。その際、text_areaで、複数行の入力が可能な入力欄を作成したので、改行を含めた文章を入力し、それを表示させようとしたところ、改行がされていない文章が表示されてしまいました。
今回はその問題を解決する方法を調べたので記事に残しておきます。

環境

macOS Catalina バージョン 10.15.7
Ruby 2.6.5
Ruby on Rails 6.0.3.4

前提として

フォームのコードは以下の通り。

app/views/shared/_form.html.erb

<%= form_with(model: word, local: true) do |f| %>
  <%= f.text_area :remarks, placeholder: "備考", rows: "7" %>
  <%= f.submit "Register" %>
<% end %>

念の為、このフォームで送られてくるデータに改行が含まれているか、Railsのデバックツールであるpry-railsを用いて確認してみました。
まず、以下の改行を含めた文章をフォームで送信しました。

おはよう
こんにちは

ここで、コントローラーに記述したbinding.pryのところで一旦処理が止まるので、コンソールでparamsを実行し、送られてきたパラメーターを確認したところ、

このように、改行した部分に改行コードである「\r\n」が含まれており、ちゃんとデータとして送られてきていることが分かります。

そして、送られてきたデータを表示するためのコードが以下なのですが、

app/views/show.html.erb

<%= @word.remarks %>

このままだと改行が含まれず、以下のような表示になってしまいます。

おはよう　こんにちは

この問題を解決する方法を、以下2通りまとめました！
#①simple_formatメソッド

以下のサイトを参考にしました。

simple_formatはRailsのヘルパーメソッドで、下記の機能を有します。

文字列を<p>で括る
改行は<br>を付与
連続した改行は<p></p>を付与

では、show.html.erbにsimple_formatを追記します。

app/views/show.html.erb

<%= simple_format(@word.remarks) %>

そして、ブラウザを更新し改めて確認してみると、

おはよう
こんにちは

このように改行がされたまま表示がされました！

ChromeのデベロッパーツールのElementsパネルを確認すると、

たしかに、文字列がpタグで括られており、改行にはbrタグが付与されています。

そこで、試しに以下のようにいくつか連続した改行の場合を調べてみました。

おはよう



こんにちは

しかし、表示を確かめると、

おはよう
こんにちは

このように、連続した改行は実際に入力した通りには表示されませんでした。
ちなみに、Elementsパネルを確認すると、以下のようにpタグが付与されていました。

なので、この場合は改行ではなく、「おはよう」と「こんにちは」それぞれが1つの段落として表示されている事になります。

②safe_joinメソッド

以下のサイトを参考にしました。

safe_joinメソッドもRailsのヘルパーメソッドの一つです。
simple_formatと違い、pタグで括らず、連続した改行を表示させることができます。

まず、先ほどの記述を以下のように書き換え。

app/views/show.html.erb

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

※ splitは文字列を分割するメソッド。引数に区切り文字を指定することで、その区切り文字のところで文字列を区切る。

あとは、同じように複数の連続した改行を含む文章を入力してみると、

おはよう


こんにちは

きちんと入力した通りの表示がされました！！
Elementsパネルを確認すると、

brタグで改行されているのが分かります。

最後に

色々調べる中で、HTMLやタグ、エスケープ処理などの記事を目にしました。これらの理解が深まったと同時に、知らない知識に触れる機会も多かった為、さらに派生させ知識をより深めていきたいと思います。

誤った箇所などありましたら、ご指摘いただけると幸いです。

You get articles that match your needs
You can efficiently read back useful information
You can use dark theme

What you can do with signing up