【JavaScript】改行を<br>タグに変換する方法

Web開発の世界では、テキストを表示する際に改行が頻繁に使われます。しかし、通常の改行文字（\nまたは\r\n）は、HTML内でそのままでは改行として表示されません。その代わりに、HTMLで改行を表現するためには<br>タグを使用する必要があります。この記事では、JavaScriptを使用してテキスト内の改行を<br>タグに変換する方法について説明します。

スポンサーリンク

replace メソッドを使用する方法

最初の方法は、replace メソッドを使用して改行文字を
タグに置換する方法です。

function convertNewlinesToBr(text) {
  return text.replace(/\r?\n/g, '<br>');
}

const inputText = "これは\n改行を含む\nテキストです。";
const convertedText = convertNewlinesToBr(inputText);
console.log(convertedText);

この方法は、テキスト内の改行文字を全て<br>タグに変換します。

split と join メソッドを使用する方法

次に、split と join メソッドを使用して改行を<br>タグに変換する方法を紹介します。

function convertNewlinesToBr(text) {
  const lines = text.split('\n');
  return lines.join('<br>');
}

const inputText = "これは\n改行を含む\nテキストです。";
const convertedText = convertNewlinesToBr(inputText);
console.log(convertedText);

この方法は、テキストを改行文字で分割し、それを<br>タグで再結合します。

HTMLエスケープを行う方法

最後に、HTMLエスケープを適用し、テキスト内の改行文字をそのまま残す方法を紹介します。

function convertNewlinesToBr(text) {
  const escapedText = text.replace(/</g, '&lt;').replace(/>/g, '&gt;');
  return escapedText.replace(/\r?\n/g, '<br>');
}

const inputText = "これは\n改行を含む\nテキストです。";
const convertedText = convertNewlinesToBr(inputText);
console.log(convertedText);

この方法は、テキスト内のHTMLエスケープが必要な場合に便利です。

よくある質問（FAQ）

Q. JavaScriptで改行コード（\n）をHTMLの
タグに置換するには？
A. string.replace(/\n/g, “
“)で一括置換できます。/\n/gのgフラグで全ての改行を置換します。\r\nやMac/Linux形式の改行も対応する場合は/\r?\n/gを使います。
Q.
タグに変換する際にXSSに注意する必要がありますか？
A. はい。ユーザー入力の文字列を変換してHTMLに挿入する場合は、<や>などをエスケープしてからbrに変換する順序が重要です。逆順だとXSSの脆弱性になります。
Q. HTMLのpre要素やwhite-space: pre-wrapで改行を保持する方法もありますか？
A. はい。インラインで改行を保持するにはCSSのwhite-space: pre-wrapが有効で、HTMLを変更せずに改行を表示できます。pre要素はそのままのテキスト内容を表示するのに適しています。

まとめ

改行を<br>タグに変換する方法はいくつかあり、具体的な要件に合わせて選択できます。Webページやアプリケーションでテキストを表示する際に、これらの方法を使用して改行を適切に処理できます。