将带有换行符的文本从Javascript设置为HTML

Question

我有一个字符串，在每行的末尾都有换行符，就像我下面这样：

1
12
123
1234
12345
123456
1234567
12345678
123456789
12345678
1234567
123456
12345
1234
123
12
1

这来自我想设置为HTML中的段落标签的字符串变量。我尝试使用innerHTML方法，但它只打印我的结果而没有换行符。

关于如何完成此任务的任何想法吗？

Answer 1

您可以将所有换行符替换为<br>：

const str = `1
12
123
1234
12345
123456
1234567
12345678
123456789
12345678
1234567
123456
12345
1234
123
12
1`;
document.querySelector('p').innerHTML = str.replace(/\n/g, '<br>');

<p></p>

Answer 2

您可以将段落的white-space CSS property设置为pre，pre-wrap或pre-line。所有这些都将保留换行符。

document.querySelector('p').innerHTML = `1
12
123
1234
12345
123456
1234567
12345678
123456789
12345678
1234567
123456
12345
1234
123
12
1`;

p {
  white-space: pre;
}

<p></p>