How to display the text entered in text_area in Rails with line breaks

Introduction

I created an app with a posting function in Ruby on Rails. Implement the form on the post screen using the Rails helper method form_with method. At that time, I created an input field in text_area that allows input of multiple lines, so when I entered a sentence including line breaks and tried to display it, the sentence without line breaks was displayed. It was. This time I investigated how to solve the problem, so I will leave it in the article.

environment

macOS Catalina version 10.15.7 Ruby 2.6.5 Ruby on Rails 6.0.3.4

As a premise

The code of the form is as follows.

Ruby:app/views/shared/_form.html.erb

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

Just in case, I used Rails' debugging tool pry-rails to check if the data sent by this form contains line breaks. First, I submitted the text including the following line breaks in the form.

Good morning
Hello

Here, the processing stops once at the binding.pry described in the controller, so when I executed params on the console and checked the parameters sent, As you can see, the line feed code "\ r \ n" is included in the line feed part, and it is properly sent as data.

And the code to display the sent data is below,

Ruby:app/views/show.html.erb

<%= @word.remarks %>

If this is left as it is, line breaks will not be included and the display will look like the one below.

Good morning Hello

Here are two ways to solve this problem!

① simple_format method

I referred to the following site.

• https://railsdoc.com/page/simple_format
• 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
• https://beryus.hatenablog.com/entry/2020/10/06/004936

** simple_format is a Rails helper method ** and has the following functions.

• ** Enclose the string in \

  **

• ** Line breaks are given \
  **
• ** Consecutive line breaks are given \
  \

  **

Now, add simple_format to show.html.erb.

Ruby:app/views/show.html.erb

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

And when I update the browser and check it again,

Good morning
Hello

It was displayed with line breaks like this!

If you look at the Elements panel in Chrome's developer tools, Certainly, the string is enclosed in p tags, and line breaks are tagged with br.

Therefore, I tried to investigate the case of several consecutive line breaks as shown below.

Good morning



Hello

However, when I check the display,

Good morning
Hello

As you can see, consecutive line breaks didn't look exactly as you typed them. By the way, when I checked the Elements panel, the p tag was added as shown below. So, instead of this case is a new line, it will each "good morning" and "Hello" is ** display as ** one paragraph.

② safe_join method

I referred to the following site.

• 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
• https://qiita.com/kamotetu/items/1aa94994985c720668e4

The safe_join method is also one of Rails' helper methods. Unlike simple_format, you can display continuous line breaks without enclosing them in p tags.

First, rewrite the previous description as follows.

Ruby:app/views/show.html.erb

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

• Split is a method that splits a character string. By specifying a delimiter in the argument, the character string is separated at the delimiter.
  After that, if you try to enter a sentence containing multiple consecutive line breaks in the same way,

Good morning


Hello

The display is exactly what you typed! !! If you check the Elements panel, You can see that the line breaks with the br tag.

Finally

While researching various things, I saw articles such as HTML, tags, and escaping. At the same time as I deepened my understanding of these things, I had many opportunities to come into contact with unknown knowledge, so I would like to further derive and deepen my knowledge.

I would appreciate it if you could point out any mistakes.