今回は改行のエスケープに関する話です。
Rails側から取得した値をtextareaタグなどのHTMLタグにセットする時、取得した値の中に改行コードが含まれているとJavaScriptで「Uncaught SyntaxError: Invalid or unexpected token」という構文エラーが出てしまう。
原因と対策方法
対策
対策としてRailsの値を渡す前に、「gsub」を使って改行コードをエスケープしておきます。
以下がエスケープ例です。
1 |
@hoge = hogemodel.comment.gsub(/(\r\n|\r|\n)/, "\\n") |
ちなみに、html.erbやjs.erbファイル内でもこのようにしてエスケープを渡す直前に行う事が出来ます。
1 |
var hoge = '(<%=@hogemodel.comment.gsub(/(\r\n|\r|\n)/, "\\n")%>)'; |
これを行う事で「Uncaught SyntaxError: Invalid or unexpected token」エラーを回避することができます。
何でRailsのフォームヘルパーに入れるときはエラーにならないの?
以下のようなフォームヘルパーを使って値を入れる場合、自動的にエスケープ処理を行ってくれています。
1 2 3 4 5 6 |
<%= form_for @hoge do |f| %> タイトル: <%= f.text_field :title %> <br> 名前: <%= f.text_field :name %> <br> 投稿内容: <%= f.text_area :content %> <br> <%= f.submit %> <% end %> |
この方法で改行入りデータを出力させると、何もせずとも改行が反映されてテキストエリアに表示されます。
ですが、<%=@hoge%>のような形で値を直接HTMLタグに挿入する場合は、手動でエスケープする必要があるようです。
改行コードをBRタグに置き換えたい場合
ついでに、テキストエリアで入力された改行入り文章を、そのままHTML内に出力しても改行されず一行で出力されてしまいます。
理由は、JavaScriptの改行コードをそのままHTMLに読み込ませても識別しないためです。
対策
改行コードを<br>タグに置き換えてしまいます。
やり方はさっきの方法と同じくRails側で「gsub」を使って値を加工します。
1 |
@hoge = hogemodel.comment.gsub(/(\r\n|\r|\n)/, "<br>") |
もしくは、「simple_format」を使う方法があります。
1 |
<%= simple_format(@hoge)%> |
simple_formatを使用する場合、文章がpタグで囲まれるようになります。
どちらを採用するかはお好みで。