【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エスケープが必要な場合に便利です。

まとめ

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