改行コードをbr要素に置き換える

テキストにある改行コードをHTMLでも改行されるようにする

テキストファイルから読み込んだ通常のテキストは、HTMLのページにそのまま挿入すると改行は反映されません。
改行を反映したいときは、テキストに含まれる改行（改行コード）をHTMLのbr要素に置き換えます。

以下の例では、Fetch APIでテキストファイル「test.txt」を読み込んで、テキスト中の改行をbr要素に置き換えてid属性「text_loading」を持つp要素に挿入します。

test.txt

Hello!
このテキストは、
改行を含んでいます。

JavaScriptコードは次のようになります。

JS コード例

fetch('/text/test.txt')
.then(response => response.text())
.then(text => {

	// テキストを挿入するp要素を取得
	const text_area = document.getElementById('text_loading');

	// 改行（改行コード）をbr要素に置き換えて挿入
	text_area.innerHTML = text.replace(/\n/g, '<br>');
});

Fetch APIで読み込んだテキストは変数textに入ります。
そして、このテキストを正規表現による置き換えを行うreplaceメソッドを実行して改行を置き換えます。

JavaScriptの正規表現でテキスト中の改行コードを検索するときは「\n」を探します。
併せて、全ての改行を置き換えるうための「g」フラグを指定します。

replaceメソッドによる置き換えを行ったテキストは、あらかじめ取得したp要素のinnerHTMLプロパティに挿入することでページに表示します。

こちらの記事は役に立ちましたか？

コメントありがとうございます！
運営の参考にさせていただきます。