JavaScriptで持ってきたJSONファイル内の改行文字\nを、<br>に置換したい

Question

前提・実現したいこと

いつもお世話になっております。
今回、外部においてあるjsonファイルを、JQueryのgetJSONで取得し、
用意してある配列に順番にpushしていくという処理を、
ファイル内に含まれている\nを、<br>に置換してpushするというように
改修したいと考えています。
色々調べながら実装してみましたがいまいちうまくいかず、
皆様の知見をお借りしたく思い、質問させていただきます。

発生している問題・エラーメッセージ

コンパイルエラーやメッセージは出ないものの、置換できていない

該当のソースコード

/* replacer関数 */
  function replacer(key,value){
    var str = new String(value);
    str.replace(/\n/g, "<br>");
    console.log(str);
　　return str;
  }

  /* jsonファイルの取得関数 */
  function jsonLoader(){
    $.getJSON({
      type: 'GET',
      url: 'jsonファイルの格納場所',
      dataType: 'json',
      async: false,
    }).done(function(json, textStatus, jqXHR) {
        JSON.stringify(json,replacer,"\t");
	console.log(json);
        for(var i = 0; i < json.length; i++){
          myQuestions.push({
            'question': json[i].question,
            'answers': json[i].answers,
            'details': json[i].details,
            'correctAnswer': json[i].correctAnswer
          });
        };
     }).fail(function(jqXHR, textStatus, errorThrown){
        alert(errorThrown);
     });
  }

試したこと

replace関数を用いてみましたがうまく動作しませんでした。
現在JSON.stringify(json,replacer,"\t");で定義したreplacer関数を呼び出していますが
うまくいっていません。

Answer 1

const a = {id:1, name:"adam\njohn"}
console.log(JSON.stringify(a, (k,v) => (typeof v === "string") ? v.replace(/\n/g, "<br>") : v), "\t")

でできますが(kasa0様の回答をご参考に)、

done(function(json, textStatus, jqXHR) {
        JSON.stringify(json,replacer,"\t");
    console.log(json);
        for(var i = 0; i < json.length; i++){
          myQuestions.push({
            'question': json[i].question,
            'answers': json[i].answers,
            'details': json[i].details,
            'correctAnswer': json[i].correctAnswer
          });

ここのところで、stringifyが成功しても、それを返り値として受けとって、parseしてjsonに再度格納しなければ、json[i]で取得できるのは置換前の値です。

Comments

[kisuke-09]

papinianus様

ご回答ありがとうございます。
stringifyはreplacer関数内で行い、JSON.parce(str)してからreturnするほうが良いでしょうか。

[papinianus]

すみません。理解できません。
私の意図は、`json = JSON.parse(JSON.stringify(json, replacer));`みたいな意味です。
replacerはstrinfigyから呼ばれるコールバックなので、呼ばれた側であるreplacerで呼ぶ側の処理(stringify)するというのは矛盾しているように思えます。

[kisuke-09]

勉強不足でした、申し訳ありません。
ご指摘ありがとうございます。
その方向で試してみます。

Answer 2

正規表現が間違ってますよ。
改行コードの\nを取得したいなら、
\という文字列も含めるようにしないと。
kasa0さんの回答の再代入に関しても併せて、下記のようにします。

str = str.replace(/\n/g, "<br>");

今のままだと、エスケープしたnを検索するって正規表現になってるのです。

Comments

[kisuke-09]

miyabi_takatsuk様
ご回答ありがとうございます。

正規表現は自分も全く勉強できておらず、ご指摘いただけて助かりました。
どうも上記の方法でうまくいかないようなので解決には至りませんでしたが、
貴重なご回答、ありがとうございます。

[miyabi_pudding]

なるほど。
replacer関数は通っていますか？
通っているなら、引数のvalueには何が入っていますか？
valueはString型なのか、オブジェクト型なのか
また、console.log(json);
は何が出力されていますか？
コンソールで何が出力されているか、
目的の関数が通っているかどうかも含めて、質問記載してみましょう。

今のところのやりとりだけでは、
スクリプトのどこを通って、どこを通ってないか、引数や変数に何が格納されているかが見えてきません。
それでは、的を射た回答は得られないかと思います。

Answer 3

なんか別の言語と勘違いしていませんか？
PHPやJavaScriptは破壊メソッド、非破壊メソッドの区別がわかりにくいところがある言語なので、
公式リファレンス等を確認する癖を付けましょう。

質問文では下記の機能を利用していますが、JavaScriptでは両方とも非破壊メソッドです。
JavaScriptは公式サイトが超わかりにくいECMAScriptなので、
Firefox作ってる団体(Mozilla)が運営しているMDNを見るのが無難です。

String.prototype.replace
JSON.stringify

// String.prototype.replace
var a = "hogehoge";
console.log(a.replace(/eh/, "XX")); // "hogXXoge"
console.log(a); // "hogehoge"

コンパイルエラーやメッセージは出ないものの、置換できていない
str.replace(/\n/g, "<br>");

str = str.replace(/\n/g, "<br>");にして一度確認してみてください。

Comments

[kisuke-09]

miyabi-sun様

ご回答ありがとうございます。
確かに公式の記述ではわかりにくい部分も多々ありました。勉強になります。
ご指摘いただいて点について、修正しましたが、うまく動かない状態です。
ほかの回答者様の案も試しながら試行錯誤してみます。

Answer 4

replaceは置換した結果を返すので、strへ再代入してやる必要があります。

str = str.replace(/\n/g, "<br>");

Comments

[kisuke-09]

kasa0様

ご回答ありがとうございます。
再代入の必要について認識していませんでした。
ご助言いただきありがとうございます。
しかしながら、再代入してみたもののうまく動いていません。。