JavaScriptでのreplace関数による改行変換処理について

Question

お世話になっております。

JavaScriptでの改行変換処理について質問があります。

以下のような文章(Text1)がテキストフィールドに格納されているとき、

aaaaa

BBBBBB
ccc DDDD

fffff

上記のようなテキストを取得して、他のテキストフィールド等(Text2)にそっくりそのまま表示させるにはどのような記述で達成できるでしょうか？

現在、JavaScriptのreplace関数を用いて以下のような正規表現で改行等を処理しようとしています。

var Text2 = Text1.replace(/\s+\g,'<br>'); // 空白(\s)を全て改行(<br>)に変換。

上記の記述では、変換後のText2は、以下のように表示されます。

aaaaa
BBBBBB
ccc
DDDD
fffff

単純に空白を改行に変換しているだけなので、aaaaaとBBBBBB、ccc DDDDとfffffの空行が詰められてしまったり、逆にccc DDDDの間の空白も改行されてしまったりといった問題が発生します。

上記課題について、知見をお持ちの方がいらっしゃればよろしくお願いいたします。

Comments

[dameo]

テキストフィールドと言ってるのが何なのかよく分かりません。
とりあえずinput要素だと複数行無理なので、textareaかなぁと思いました。
textareaは改行は改行と扱われたはずなので特に置換は必要なかったと思います。
以下確認コードを提示します。

<input type="text" id="field1" name="field1" value="aaaaa

BBBBBB
ccc DDDD

fffff">
<input type="text" id="field2" name="field2" value="">
<textarea id="Text1" name="Text1">aaaaa

BBBBBB
ccc DDDD

fffff</textarea>
<textarea id="Text2" name="Text2"></textarea>
<button id="button1">
log
</button>
<script>
document.addEventListener('click', ()=>{
const text = document.querySelector('#Text1').textContent;
console.log(text);
document.querySelector('#Text2').value = text;
});
</script>

テキストフィールドと言ってるのは何なのでしょうか？

Answer 1

cssの問題であればこうしてください
（あとはjsで属性を設定すれば良いと思います）

<style>
#txt2{white-space:pre}
</style>

<div id="txt2">
aaaaa

BBBBBB
ccc   DDDD

fffff
</div>

Answer 2

改行\nを置換すればいいのでは？何故に\s+？？？

Answer 3

与えられた文字列 Text1 に含まれる改行を replace で<br /> に変換するのもよいですが、もうひとつのやり方として、

そっくりそのまま表示

させたいテキストについては、<pre>タグ で表示させるという方法もあります。

<pre id="text"></pre>

const Text1 = `aaaaa

BBBBBB
ccc   DDDD

fffff`;

// Text1 のまま、要素のtextContentに設定
document.querySelector('#text').textContent = Text1;

???? サンプル