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, Image from Gyazo 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.

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

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, Image from Gyazo 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. Image from Gyazo 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.

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)) %>
Good morning


Hello

The display is exactly what you typed! !! If you check the Elements panel, Image from Gyazo 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.

Recommended Posts

How to display the text entered in text_area in Rails with line breaks
[Ruby On Rails] How to use simple_format to display the entered text with line breaks
[Rails] How to display an image in the view
Enter line breaks in rails text_area → display as it is.
[Rails] How to display information stored in the database in view
How to store the information entered in textarea in a variable in the method
[Rails / simple_format] Helper method that reflects line breaks entered in the form
[Rails] How to get the user information currently logged in with devise
[Rails] How to apply the CSS used in the main app with Administrate
How to check Rails commands in the terminal
[Rails] How to register multiple records in the intermediate table with many-to-many association
Organized how to interact with the JDK in stages
How to embed and display youtube videos in Rails (You can also get the URL you entered by editing)
How to check if the characters entered in the Swift Text Field are email addresses
[Swift] How to display the entered characters in Widget via UserDefaults when using WidgetKit
[Rails] How to display the weather forecast of the registered address in Japanese using OpenWeatherMap
[With back tricks] How to introduce React to the simplest Rails
How to display a graph in Ruby on Rails (LazyHighChart)
[Rails] How to display the list of posts by category
[rails] How to display db information
[Rails] How to write in Japanese
How to introduce jQuery in Rails 6
How to get along with Rails
Display a balloon message in BarButtonItem of NavigationBar with a size according to the amount of text.
How to install Swiper in Rails
How to prevent past dates from being entered in Rails forms
[Rails / Routing] How to refer to the controller in the directory you created
[rails] How to display parent information in child view in nested relationships
[Rails] How to introduce kaminari with Slim and change the design
[Behavior confirmed in December 2020] How to implement the alert display function
How to get boolean value with jQuery in rails simple form
How to rename a model with foreign key constraints in Rails
[Rails] How to reset the database in production environment (Capistrano version)
How to increment the value of Map in one line in Java
[Rails 5] How to display the password change screen when using devise
How to write the view when Vue is introduced in Rails?
How to write when you want to keep line breaks and output while avoiding XSS in Rails
How to implement search functionality in Rails
How to change app name in rails
How to use custom helpers in rails
[Rails] How to use rails console with docker
How to insert a video in Rails
[Rails] How to use the map method
[Rails] How to display error messages individually
How to use MySQL in Rails tutorial
[rails] How to configure routing in resources
How to get the date in java
How to implement ranking functionality in Rails
[Rails] How to use video_tag to display videos
How to use credentials.yml.enc introduced in Rails 5.2
Rails6: Extract the image in Action Text
How to build Rails 6 environment with Docker
How to display error messages in Japanese
[Rails] How to log in with a name by adding a devise name column
How to compare only the time with Rails (from what time to what time, something like)
[Ruby on Rails] How to log in with only your name and password using the gem devise
[Rails] How to decide the destination by "rails routes"
[Rails] How to read the XML file uploaded from the screen with Hash type
How to check the logs in the Docker container
[Ruby on Rails] How to display error messages
I tried to organize the session in Rails