JSONデータに改行コードを入れる方法

こんばんは。最近プログラミングしてないなと反省してますshojiです。
仕事でAPIを開発していて、レスポンスデータとして改行コード入りのJSON文字列を返そうと思ったときに少し悩んだのでメモします。

※こちらは2017年に公開した記事ですが、文章と構成を見直して再度公開いたしました。

確認した環境

JavaScriptからAPIを呼び出し、レスポンスとして下記のようなJSON文字列を取得し、改行コード \n の含まれるテキストデータをテキストエリアに表示したいと思います。

{"description": "こんにちは。\nお元気ですか？"}

1	{"description": "こんにちは。\nお元気ですか？"}

JSON文字列ですので、JSON.parseメソッドでJSON文字列からJavaScriptのオブジェクトにパースする必要があります。

var description = JSON.parse(jsonString).description;
document.getElementById("description").value = description;

1 2	var description = JSON.parse(jsonString).description; document.getElementById("description").value = description;

しかし、JSON.parseで次のエラーが発生してしまいました。

Uncaught SyntaxError: Bad control character in string literal in JSON at position 23

1	Uncaught SyntaxError: Bad control character in string literal in JSON at position 23

試しにJSON文字列に改行コードを含めないで実行したら、エラーが発生しなくなったので、レスポンスに含まれる改行コードが問題のようです。

では、上記のような処理を考えた場合、どのようにレスポンスに改行コードを含めると良いのでしょうか。

レスポンスを次のようなJSON文字列にすれば、正しく動作するようです。

{"description": "こんにちは。\\nお元気ですか？" }

1	{"description": "こんにちは。\\nお元気ですか？" }

改行コードが \\n に変わっていますね。なぜバックスラッシュが２つ必要なのでしょうか・・・？

これには、JavaScriptとJSON文字列を分けて考えると良いようです。

まず、JSON文字列ではなく、JavaScriptのオブジェクトのみでエラーケースと同じことを実装してみます。

var description = {"description":"こんにちは。\nお元気ですか？"}.description;
document.getElementById("description").value = description;

1 2	var description = {"description":"こんにちは。\nお元気ですか？"}.description; document.getElementById("description").value = description;

これを実行すると、テキストエリアには正しく改行コードが含まれて表示されました。

こんにちは。
お元気ですか？

1 2	こんにちは。お元気ですか？

つまり、JavaScriptの世界だけで考えた場合、改行コードは \n で問題ないようです。

続いて、JSON文字列について考えてみます。

JSON仕様によりますと、バックスラッシュ文字はエスケープして表現する必要があり、6文字形式 \u005c または2文字形式 \\ という二通りの表現が可能なようです。

つまり、次の２つのJSON文字列はどちらも \n という文字列を意味します。

"\\n"
"\u005cn"

1 2	"\\n" "\u005cn"

これらを組み合わせて考えると、JSON文字列の世界では改行文字 \n を表現するためにバックスラッシュが２つになり…

{"description": "こんにちは。\\nお元気ですか？"}

1	{"description": "こんにちは。\\nお元気ですか？"}

これをJSON.parseすると、JavaScriptの世界では、

{"description": "こんにちは。\nお元気ですか？"}

1	{"description": "こんにちは。\nお元気ですか？"}

というオブジェクトとして取得され、 \n は改行コードになりますので、出力時に改行され…

こんにちは。
お元気ですか？

1 2	こんにちは。お元気ですか？

と表示されるようです。

以上となります。