エディタ内で改行をしても改行は反映されません。改行を反映させるにはHTMLであればbr
を入力する必要あります。
ですが、状況によってはbrをつけないでも改行が反映されて欲しい時があります。
そこで今回は、br
をつけないでもエディタ内で改行されたら自動的にbr
がJavaScriptで付与させる設定方法をご紹介したいと思います!
ちなみに、cssのwhite-space: pre-wrap;
でも改行することもできますが今回はJavaScriptで行う方法をご紹介いたします!
サンプルコード
idを指定して1箇所のみ適応する場合
<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>');
}