※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};

動作をチェック

まず、NG パターンです。

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

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

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

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


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