1
0

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 3 years have passed since last update.

【Rails】simple_formatで簡単にテキストの改行を実装(+CSSの適用、htmlエスケープも)

Last updated at Posted at 2020-04-06

##simple_formatの使い方
「railsでtext_areaの改行をviewへ反映させたい!」「改行して打ち込んだのになんか長い一文になっちゃう!」なんてことありますよね!
テキストの改行をviewへ反映する際はヘルパーメソッドのsimple_formatが有効です。

使い方は至って簡単。
simple_format(任意のテキスト)
これだけで改行をviewへ反映させることが出来ます。

text = '…ああああ!!

あああ……'

<%= simple_format(text) %>
出力

…ああああ!!

あああ……

simple_formatなだけに非常にシンプルですね。

##なんか<>で囲ったら出力されないんだけど…
そうなんですよ。困りましたね。

通常、railsではデフォルトでテキストがhtmlエスケープされています。
つまり

text = '<a href ="hoge://すごくわるいホームページ.コム">すごくわるいホームページ</a>'
<%= text %>
出力
<a href ="hoge://すごくわるいホームページ.コム">すごくわるいホームページ</a>

こうやってちゃんとhtmlタグをエスケープして出力してくれています。
これ、truncateメソッドとかも同じね!

でもでも、実はこのsimple_formatメソッドは
表示させたい文字列を<p>で囲ったり、改行は</br>で置き換えたりすることで出力してくれています。
つまりそのままだとhtmlエスケープしてくれないんです。

なので以下のように書いてしまうと…

text1 = '<a href ="hoge://すごくわるいホームページ.コム">すごくわるいホームページ</a>'
text2 = '<急募!>
         うちの犬の躾方法!'

<%= simple_format(text1) %>
<%= simple_format(text2) %>
出力
すごくわるいホームページ
うちの犬の躾方法!

# 悪いホームページへの直リンが貼られてしまう…
# <急募!>がhtmlタグだと認識されてしまう…

<急募!>が消えたどころか、すごく悪いホームページへのリンクも貼られてしまいます。

##じゃあどうすんの!
textをhメソッドでhtmlエスケープしましょう!
h(text)でテキストをhtmlエスケープできます。
htmlエスケープされたテキストをsimple_formatすれば解決です。

text1 = '<a href ="hoge://すごくわるいホームページ.コム">すごくわるいホームページ</a>'
text2 = '<急募!>
         うちの犬の躾方法!'

<%= simple_format(h(text1)) %>

<%= simple_format(h(text2)) %>
出力
<a href ="hoge://すごくわるいホームページ.コム">すごくわるいホームページ</a>

<急募!>
うちの犬の躾方法!

これで一件落着です。

##classとかオプションも使えるの?
simple_format(h(text), class: 'hogehoge', style: 'color: red;')

こんな感じでclassやstyleのオプションも設定できます。

##参考
https://railsdoc.com/view
https://qiita.com/mojihige/items/c01682774e8ef29b361f
(こっちのほうが詳しいとか言わない)

1
0
0

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
1
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?