【Rails】改行コードが入っているデータをテキストエリアに出力させる時エラーになる対策

  • このエントリーをはてなブックマークに追加

 

今回は改行のエスケープに関する話です。

Rails側から取得した値をtextareaタグなどのHTMLタグにセットする時、取得した値の中に改行コードが含まれているとJavaScriptで「Uncaught SyntaxError: Invalid or unexpected token」という構文エラーが出てしまう。

原因と対策方法

対策

対策としてRailsの値を渡す前に、「gsub」を使って改行コードをエスケープしておきます。

以下がエスケープ例です。

 

ちなみに、html.erbやjs.erbファイル内でもこのようにしてエスケープを渡す直前に行う事が出来ます。

 

これを行う事で「Uncaught SyntaxError: Invalid or unexpected token」エラーを回避することができます。

 

何でRailsのフォームヘルパーに入れるときはエラーにならないの?

以下のようなフォームヘルパーを使って値を入れる場合、自動的にエスケープ処理を行ってくれています。

 

この方法で改行入りデータを出力させると、何もせずとも改行が反映されてテキストエリアに表示されます。

ですが、<%=@hoge%>のような形で値を直接HTMLタグに挿入する場合は、手動でエスケープする必要があるようです。

 

改行コードをBRタグに置き換えたい場合

ついでに、テキストエリアで入力された改行入り文章を、そのままHTML内に出力しても改行されず一行で出力されてしまいます。

理由は、JavaScriptの改行コードをそのままHTMLに読み込ませても識別しないためです。

 

対策

改行コードを<br>タグに置き換えてしまいます。

やり方はさっきの方法と同じくRails側で「gsub」を使って値を加工します。

 

もしくは、「simple_format」を使う方法があります。

 

simple_formatを使用する場合、文章がpタグで囲まれるようになります。

どちらを採用するかはお好みで。

  • このエントリーをはてなブックマークに追加

SNSでもご購読できます。

コメントを残す

*