JavaScript 文字列内での改行が反映されない

Question

var btn = document.getElementById("btn");
var result = document.getElementById("result");

btn.addEventListener('click', function() {
    var payLess = 省略;
    var short = 省略;
    var payMore = 省略;
    var over = 省略;
    var str = `一人 ${payLess}円 だと ${short}円 足りません。一人 ${payMore}円 だと ${over}円 余ります。`;
    result.textContent = str;
  });

<div id="btn">計算</div>
<p id="result">ここに結果を表示します</p>

str変数に格納されている文字列の1文目と2文目の間で改行させたいです。しかし、普通に改行をしても「\n」をいれても、実行すると改行が反映されていません。その原因と対策を教えてください。

上に載せているコードは、この件に関係ありそうなコードを抜き出しているので、実際はもっと多くのコードがあります。また、payLess変数からover変数にも値が格納されているのですがここでは”省略”しています。上に載せた以外のコードが必要であれば載せます。

Answer 1

ちょっとこのHTMLをブラウザで開いて確認してみてください。
改行されて縦文字のように表示されるのではないかと考えがちですが、
1文字ずつの隙間に半角スペースが挟まるだけで改行されたとはみなされないはずです。

<p id="result">こ
こ
に
結
果
を
表
示
し
ま
す</p>

HTMLをブラウザで表示する際、強制改行のタグ<br>を挟む必要があります。
この様に変更すれば全ての文字で改行され、縦書きの様に見えることでしょう。

<p id="result">こ<br>
こ<br>
に<br>
結<br>
果<br>
を<br>
表<br>
示<br>
し<br>
ま<br>
す</p>

result.textContent = str;

この前提を元に上記のコードを見ていきます。
改行文字をそのまま挟むのではだめ。

result.innerHTML = strの方は文字列をHTMLとして解釈させながら注入するので、
改行の代わりに<br>タグを入れておけば意図通りの動作をしてくれることでしょう。

しかし、どんなタグも正常に動作すると言うことは、
scriptタグを埋め込めば任意のJavaScriptコードが実行可能です。
XSSが出来ることになるので、どうやってその対策を行うのかしっかり検討しましょう。

Comments

[ryoo_chksl]

では例えば、改行や\nを使った場合、str変数の値をコンソールに表示させたときは改行が反映されるということでしょうか？

[miyabi-sun]

そうです。試してみて下さい。

Answer 2

<style>
#result{white-space:pre;}
</style>

<p id="result">ここに
結果を
表示します</p>

Answer 3

HTML としては、<pre> タグで囲まれているなどしない限り、改行コードは HTML 表示としての改行にはなりません。
HTML 表示としての改行は <br> タグが担当しますから、改行や \n の代わりに <br> を入れてみてください。

※ただし、text として入れてしまうと解釈されないので、 innerHTML として入れてやる必要があります

Comments

[ryoo_chksl]

では例えば、改行や\nを使った場合、str変数の値をコンソールに表示させたときは改行が反映されるということでしょうか？

[tacsheaven]

コンソールや、alert のメッセージの中であれば改行されます

Answer 4

HTML上の改行は<br>です。

Comments

[ryoo_chksl]

では例えば、改行や\nを使った場合、str変数の値をコンソールに表示させたときは改行が反映されるということでしょうか？

[dice142]

コンソール出力であれば可能です。