改行コード(\n)を含む文字列で改行されなくて詰みまくった話 #JavaScript

2022/05/27 修正

v13623様よりコメントをいただき、検証の上、下記項目を修正いたしました。

対処方法について

修正前

対処方法は以下の手順で行なった。

文章中に含まれる\nを基準にsplit()をかけて配列にする。

配列化したものをjoin("\n")で改行文字で繋ぎ合わせる。

コード
getNatsumeCat() {
 const cat = getWagahai(); // 吾輩は猫である序文取得
 const natsume = "著者：夏目漱石";

　　　　const newCat = cat.split("/\\n/g").join("\n");

 return natsume + cat;
// 出力省略

修正後

修正点は以下の2点。

"/\\n/g"の表記が間違っていたため/\\n/gに修正。（実際のコードは元から修正後になっていた。）
split(), join()の二段構成からreplace()に置き換え。

対処方法は以下の手順で行なった。

文章中に含まれる\\nに対してreplace()をかけて、\nで置換する。

コード
getNatsumeCat() {
 const cat = getWagahai(); // 吾輩は猫である序文取得
 const natsume = "著者：夏目漱石";

　　　　const newCat = cat.replace(/\\n/g, "\n");

 return natsume + cat;
// 出力省略

v13623様ご指摘ありがとうございました。

概要

改行を含む文字列(文章)をWebに表示した時に、一生改行されなくて詰んだ話

やりたかったこと

アプリの画面上(<input/>)から次のような文字列を 「改行文字を含めて」 入力し、

\n\n吾輩は猫である。名前はまだ無い。\nどこで生れたか頓と見當がつかぬ。何でも薄暗いじめじめした所でニヤーニヤー泣いて居た事丈は記憶して居る。\n吾輩はこゝで始めて人間といふものを見た。\n\n然（しか）もあとで聞くとそれは書生といふ人間中で一番獰悪（だうあく）な種族であつたさうだ。\n\n此書生といふのは時々我々を捕（つかま）へて煮て食ふといふ話である。

これをプログラム内部で取得。別の文字列と連結し、出力したかった。

getNatsumeCat() {
  const cat = getWagahai(); // 吾輩は猫である序文取得
  const natsume = "著者：夏目漱石";

  return natsume + cat;
  /* 想定される出力
　　　　著者：夏目漱石

  吾輩は猫である。名前はまだ無い。
  どこで生れたか頓と見當がつかぬ。何でも薄暗いじめじめした所でニヤーニヤー泣いて居た事丈は記憶して居る。
  吾輩はこゝで始めて人間といふものを見た。

  然（しか）もあとで聞くとそれは書生といふ人間中で一番獰悪（だうあく）な種族であつたさうだ。

  此書生といふのは時々我々を捕（つかま）へて煮て食ふといふ話である。
  */
}

実際の出力

getNatsumeCat() {
  const cat = getWagahai(); // 吾輩は猫である序文取得
  const natsume = "著者：夏目漱石";

  return natsume + cat;
  /* 実際の出力
　　　　著者：夏目漱石\n\n吾輩は猫である。名前はまだ無い。\nどこで生れたか頓と見當がつかぬ。何でも薄暗いじめじめした所でニヤーニヤー泣いて居た事丈は記憶して居る。\n吾輩はこゝで始めて人間といふものを見た。\n\n然（しか）もあとで聞くとそれは書生といふ人間中で一番獰悪（だうあく）な種族であつたさうだ。\n\n此書生といふのは時々我々を捕（つかま）へて煮て食ふといふ話である。
  */
}

改行文字まんま入っとるやんけ！！！

対処方法

対処方法は以下の手順で行なった。

文章中に含まれる\\nに対してreplace()をかけて、\nで置換する。

コード

getNatsumeCat() {
 const cat = getWagahai(); // 吾輩は猫である序文取得
 const natsume = "著者：夏目漱石";

　　const newCat = cat.replace(/\\n/g, "\n");

 return natsume + cat;
/* 出力
　　　　著者：夏目漱石

  吾輩は猫である。名前はまだ無い。
  どこで生れたか頓と見當がつかぬ。何でも薄暗いじめじめした所でニヤーニヤー泣いて居た事丈は記憶して居る。
  吾輩はこゝで始めて人間といふものを見た。

  然（しか）もあとで聞くとそれは書生といふ人間中で一番獰悪（だうあく）な種族であつたさうだ。

  此書生といふのは時々我々を捕（つかま）へて煮て食ふといふ話である。
  */

原因について(考察)

今回の原因は、文章を入力したときに改行文字を一緒に入力したので、改行文字が\nという文字列として値に含まれてしまっていたことが原因と思われる。なので、console.log(cat);をすると、改行文字が\\nのようになっており、\がエスケープされて\nという文字列として認識されてしまっていたことがわかった。

「実際の出力」の項目で\nと表示されているのは\nという文字列として認識されている\nであり、ここが大きな落とし穴だった。
console.log(cat);をすると以下のようになっており、改行文字が文字列として認識されていることに気づいた。

console.log(cat);
/*
著者：夏目漱石\\n\\n吾輩は猫である。名前はまだ無い。\\nどこで生れたか頓と見當がつかぬ。何でも薄暗いじめじめした所でニヤーニヤー泣いて居た事丈は記憶して居る。\\n吾輩はこゝで始めて人間といふものを見た。\\n\\n然（しか）もあとで聞くとそれは書生といふ人間中で一番獰悪（だうあく）な種族であつたさうだ。\\n\\n此書生といふのは時々我々を捕（つかま）へて煮て食ふといふ話である。
*/

そもそも入力時に`<textarea/>`使えば良くね？

ごもっともですが、今回はアプリの仕様上、このような穴にハマりました。。。orz

改行コード(\n)を含む文字列で改行されなくて詰みまくった話