More than 5 years have passed since last update.

ElixirのUnicode操作でJSの「SyntaxError: '' string literal contains an unescaped line break」を回避する

Last updated at 2018-09-29Posted at 2018-08-07

fukuoka.ex代表のpiacereです
今回もご覧いただいて、ありがとうございます

今回は、地味にあるあるなケースで、任意のWeb入力をJavaScriptで表示すると、JavaScriptがエラーを起こし、実行不全を起こすのを、Elixir側で回避するための技をご紹介します

　お知らせ：LINE Fukuokaで、Elixir MeetUpを8/24に開催します　

fukuoka.exの1年の活動・実績を総括し、今後の方向性を示す重要なMeetUpでもあるので、どうぞライブでこの場にお立ち会いください
https://fukuokaex.connpass.com/event/89472/

今回のセッションでは、LINEから初のElixir登壇参戦で、ミラーチップ・アダムさんが、Clova（LINE AIアシスタントスピーカー）開発のために作成したElixirライブラリ「Clova」について登壇します

私は、この半年の「fukuoka.ex祭り」の中間成果・実績発表LTと、「2020年までに福岡を『エンジニアの楽園』にするには？」セッションの2本をお届けします

JavaScriptで謎のエラー

DBやAPIから取得したデータを、JavaScriptで表示したり、CSVダウンロードしようとすると、ブラウザが以下のJSエラーを吐いて、うまく動かなくなるケースがあります

SyntaxError: '' string literal contains an unescaped line break

デバッグコンソールでも、何も表示されないか、「・」しか表示されず、エラーの原因はよく分かりませんが、何か不正な文字がある、ということは、エラーメッセージで推測できます

エラー発生箇所をバイナリダンプすると、「U+2028」や「U+2029」といった、あまり聞き慣れない、Unicode文字が混在しているケースがあります

U+2028／U+2029が、何者かと言うと、「Unicodeの改行文字」のようで、ASCIIコードで言うところの、「CR（0x0D、U+000D）」や「LF（0xA、U+000A）」と類似する文字のようです

正確には、U+2028が「LS（Line Separator）」＝「行分割」で、U+2029が「PS（Paragraph Separator）」＝「段落分割」とのことです

多くのブラウザのJavaScriptでは、この「Unicodeの改行文字」は扱えず、エラーとなるようです

どうやら、任意のWeb入力をする際、Word等のオフィスドキュメントからコピペを行った場合、改行文字として、U+2028／U+2029が混入するようです

DBやAPIからのデータ取得をElixirで行っている場合は、Elixirで以下のようにU+2028／U+2029をUnicodeとして指定し、削除することで、JavaScript側での処理時にエラーを出さないようにできます

index.html.eex

data |> String.replace( "\u2028", "" ) |> String.replace( "\u2029", "" )

もし改行に変更するなら、以下のようにすればOKです

index.html.eex

data |> String.replace( "\u2028", "\n" ) |> String.replace( "\u2029", "\n" )

よろしければ、ページ左上のやのクリックをお願いしますー