エディタ内で改行をしても改行は反映されません。改行を反映させるにはHTMLであればbrを入力する必要あります。
ですが、状況によってはbrをつけないでも改行が反映されて欲しい時があります。
そこで今回は、brをつけないでもエディタ内で改行されたら自動的にbrがJavaScriptで付与させる設定方法をご紹介したいと思います！
ちなみに、cssのwhite-space: pre-wrap;でも改行することもできますが今回はJavaScriptで行う方法をご紹介いたします！
サンプルコード
idを指定して１箇所のみ適応する場合
<div id="text_box">
テキスト
テキスト
</div>
<script>
'use strict';
{
const $text_box = document.getElementById('text_box');
let $text = $text_box.textContent;
$text_box.innerHTML = $text.replace(/\n/g, '<br>');
}
</script>
//最初と最後のbrを無効にする
<style>
#text_box br:first-of-type,
#text_box br:last-of-type{
display: none;
}
</style>classを指定して複数の箇所にbrを自動付与する場合
<div class="brIn">
テキスト
テキスト
</div>let $brIn = document.querySelectorAll('.brIn');
for (let a = 0; a < $brIn.length; a++) {
let $text = $brIn[a].textContent;
$brIn[a].innerHTML = $text.replace(/\n/g, '<br>');
}タグごと情報を取得しして<br>を入れて書き換えるには、textContentをinnerHTMLに変更すると可能になります！
let $brIn = document.querySelectorAll('.brIn');
for (let a = 0; a < $brIn.length; a++) {
let $text = $brIn[a].innerHTML;
$brIn[a].innerHTML = $text.replace(/\n/g, '<br>');
}