JavaScriptでnの改行Codeで、文字列を改行させる方法

こんにちはフロントエンドエンジニアのまさにょんです！

今回は、JavaScriptで\nの改行Codeで、文字列を改行させる方法について解説していきます。

1 JavaScriptで\nの改行Codeで、文字列を改行させる方法
- 1.1 Reactなどで改行タグを使用する方法
2 JavaScript書籍 Ver. 中級-上級者向け
3 JavaScript書籍 Ver. 初級者向け
4 Twitterやってます！Follow Me！
5 参考・引用
6 最近の投稿

JavaScriptで\nの改行Codeで、文字列を改行させる方法

JavaScriptで\nの改行Codeで、文字列を改行させるには、次のようにCSSのwhite-space: pre-wrap; などが有効です。

またwhite-space: pre;やwhite-space: pre-line; などでも、 \nの改行Codeで、文字列を改行させることができます。

それぞれの詳細な説明は、次のとおりです。

white-space は CSS のプロパティで、要素内のホワイトスペースをどのように扱うかを設定します。

pre

連続するホワイトスペースはそのまま残され、行の折り返しは、ソース内の改行文字と、 <br> 要素でのみ行います。

pre-wrap

連続するホワイトスペースはそのまま残されます。行の折り返しは、改行文字や <br> 要素のあるときか、行ボックスを埋めるのに必要なときに行います。

pre-line

連続するホワイトスペースは詰められて 1 つになります。行の折り返しは、改行文字や <br> 要素のあるときか、行ボックスを埋めるのに必要なときに行われます。
MDN: white-space

SampleCodeとその実行結果は、次のとおりです。

<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <style>
    #container {
      /* 
        連続するホワイトスペースはそのまま残されます。
        行の折り返しは、改行文字や <br> 要素のあるときか、行ボックスを埋めるのに必要なときに行います。 
      */
      white-space: pre-wrap;
    }
  </style>
  <body>
    <div id="container"></div>
    <script>
      const container = document.getElementById("container");
      const text =
        "Hellow World！\nこれは、\n複数行のテキストです。\n改行が含まれています。\n";
      container.textContent = text;
    </script>
  </body>
</html>

Reactなどで改行タグを使用する方法

ReactなどのJavaScript内で、HTML構造を組み立てることができる場合は、

次のように改行Codeに合わせて改行タグである<br>タグを使う方法もあります。

const text =
  "Hellow World！\nこれは、\n複数行のテキストです。\n改行が含まれています。\n";
// 改行コードをHTMLの改行タグに置き換える
const replacedText = text.replace(/\r\n|\n/g, "<br>"); 
console.log(replacedText);