JavaScript

最終更新日:
公開日:

レシピ

文字列

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

テキストに含まれる改行コードをHTMLの改行タグであるbr要素に置き換える方法について解説します。

この記事のポイント

  • JavaScriptの正規表現でテキストにある改行(改行コード)を探すときは「\n」 を探す
  • 改行(改行コード)をbr要素に置き換えるときは正規表現のreplaceメソッドを使う

テキストにある改行コードを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プロパティに挿入することでページに表示します。