More than 1 year has passed since last update.

HTMLに改行文字\nを含む文字列を改行として表示する方法

Posted at 2023-11-13

HTMLタグ要素内容は、別の場所で設定され、改行の内容も含まれます。

<body>
  <p id='test'></p>
</body>
<script>
  const str = '{"text":"text検証\\n test"}'
  const obj = JSON.parse(str)
  document.getElementById('test').innerHTML = obj.text
</script>

しかしこの場合、改行は表示されません。

修正方法は簡単で、white-spaceというCSSプロパティの追加です。

<body>
  <p id='test' style="white-space: pre-line;"></p>
  <!-- <p id='test' ></p> -->
</body>
<script>
  const str = '{"text":"text検証\\n test"}'
  const obj = JSON.parse(str)
  document.getElementById('test').innerHTML = obj.text
</script>

これにより、改行が正しく表示されます。

You get articles that match your needs
You can efficiently read back useful information
You can use dark theme

What you can do with signing up