※2019年05月追記
新しいブラウザでは本記事の対応が不要になったようです。
(最新の Chrome で確認)

古いブラウザで、パースエラーが再現するかもしれません。

JSON のパースに失敗する

パソコン向けの CMS 開発で、JavaScript での JSON のパースでエラーになることがありました。

エラー発生は

フォームのデータをプログラムで受け取り、サーバに送って DB に保存します。

編集時、サーバから JSON で受け取り、クライアントサイドで パースします。

ここでエラーです。

原因は ?

エラーは

  • Windows 環境で、
  • テキストエリアを含むフォームのデータをJSON化し、
  • JaraScript の JSON.parse() でパースした

ときに発生していました。


改行コードがあるとパースに失敗するようで、

具体的には、
Windows 系の改行コード CRLF (¥r¥n) があるとダメ でした。

改行コードを変換しつつ JSON をパースする

今回は、 改行コードを \n に統一してから JSON をパース することで対処しました。

サンプルコードです。

 1var parseJson = function(jsonString) {
 2  var converted = convertNl(jsonString);
 3  return JSON.parse(converted);
 4};
 5
 6var convertNl = function(jsonString) {
 7  return jsonString
 8    .replace(/(\r\n)/g, '\n')
 9    .replace(/(\r)/g,   '\n')
10    .replace(/(\n)/g,  '\\n');
11};
12

動作をチェック

まず、NG パターンです。

1var jsonString = '{"greet":"こんにちは\\r\\n世界"}';
2JSON.parse(jsonString);
3

JSON.parse() だとパースエラーになりますね。

1var jsonString = '{"greet":"こんにちは\\r\\n世界"}';
2parseJson(jsonString);
3

今回のサンプルコードに通すと、エラーが発生せずパースに成功しました。


「サーバで保存する時に改行を揃える」という対処でも良さそうですね。

JavaScript コードレシピ集

池田 泰延,鹿野 壮
出版社:技術評論社  発売日:2019-01-25

Amazonで詳細を見る