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

JavaScriptを使用して、テキスト内の改行文字をHTMLの
タグに変換する方法は複数あります。以下に、それぞれの方法を紹介します。

スポンサーリンク

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

const str = "This is a\nmultiline\nstring.";
const htmlString = str.replace(/\n/g, "<br>");
console.log(htmlString); // "This is a<br>multiline<br>string."

この方法では、replace() メソッドを使用して、改行文字 \n を正規表現 /\\n/g で検索し、それを
タグに置換します。

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

const str = "This is a\nmultiline\nstring.";
const lines = str.split("\n");
const htmlString = lines.join("<br>");
console.log(htmlString); // "This is a<br>multiline<br>string."

この方法では、split() メソッドで改行文字 \n を使って文字列を行に分割し、join() メソッドで
タグを用いて行を再度結合します。結果として、改行を
タグに変換したHTML文字列を取得できます。

split() メソッドと join() メソッドの使い分け

使い分けは、コードの目的やコンテキストに応じて行われます。改行を含むテキストを一括で置換するだけであれば、replace() メソッドを使用する方法が簡潔で効率的です。しかし、テキストを行ごとに処理する必要がある場合や、改行文字のパターンが複雑な場合は、split() メソッドと join() メソッドを使用する方法が適しています。

よくある質問(FAQ)

Q. JavaScriptで改行を
タグに変換するには?
A. string.replace(/\r?\n/g, “
“)でWindows/Unix両対応の変換ができます。HTMLに挿入する前に<>&などの特殊文字をエスケープしてからbrに変換してください。
Q.
変換とXSS対策はどうするべきですか?
A. まずHTML特殊文字(<>&など)をエスケープし、その後で改行を
に変換します。逆の順序だとブラウザがタグとして解釈するリスクがあります。
Q. innerHTMLとinnerTextはどう使い分けますか?
A. innerTextは改行がDOMの改行として表示されますが、HTMLタグは解釈されません。HTMLタグを含む文字列を表示したい場合はinnerHTMLを使いますが、XSSに十分注意してください。

まとめ

avaScriptで改行を
タグに変換する方法は、正規表現のreplace()メソッドやsplit()メソッドとjoin()メソッドを使う方法があります。これらの方法を使うと、改行を含むテキストをHTMLで適切に表示することができます。