質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

87.61%

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

受付中

回答 4

投稿

  • 評価
  • クリップ 0
  • VIEW 8,323

score 13

前提・実現したいこと

いつもお世話になっております。
今回、外部においてある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関数を呼び出していますが
うまくいっていません。

  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 過去に投稿した質問と同じ内容の質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 4

+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]で取得できるのは置換前の値です。

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2019/01/10 16:05

    papinianus様

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

    キャンセル

  • 2019/01/10 16:08

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

    キャンセル

  • 2019/01/10 16:36

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

    キャンセル

0

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

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

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2019/01/10 16:02

    kasa0様

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

    キャンセル

0

なんか別の言語と勘違いしていませんか?
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>");にして一度確認してみてください。

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2019/01/10 16:00

    miyabi-sun様

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

    キャンセル

0

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

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

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

投稿

編集

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2019/01/10 17:03

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

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

    キャンセル

  • 2019/01/10 18:32

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

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

    キャンセル

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 87.61%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

同じタグがついた質問を見る