使用 JavaScript 将模板文字添加到 html 时保留换行符答案

【问题标题】：Preserve line breaks when adding template literal to html with JavaScript使用 JavaScript 将模板文字添加到 html 时保留换行符
【发布时间】：2021-01-16 14:08:26
【问题描述】：

添加到 html 时，如何保留下面 str 模板文字中的行尾字符？

let str = `

          Woke up this morning,
           
           ate a baguette,
           
           smiled at a person and they smiled back.`

document.getElementById("example").innerHTML = `<div>Dreamfit:</div><div>${str}<div>`

&lt;div id="example"&gt;&lt;/div&gt;

【问题讨论】：

你想只保留换行符，还是包括缩进在内的所有空格？
我同意 Joan Albert 的回答，但也请参阅 MDN 上white-space 属性的Values 部分末尾的摘要表。 pre、pre-wrap、pre-line 和 break-spaces 都将保留换行符，因此您使用哪一个取决于您想要保留的其他内容。
@StephenP 对缩进感到矛盾 - 感谢您提供额外的选项

标签： javascript html line-breaks template-literals end-of-line

【解决方案1】：

您可以使用<pre> 标签来做到这一点：

let str = `<pre>

          Woke up this morning,
           
           ate a baguette,
           
           smiled at a person and they smiled back.</pre>`

document.getElementById("example").innerHTML = `<div>Dreamfit:</div><div>${str}<div>`

&lt;div id="example"&gt;&lt;/div&gt;

【讨论】：

这行得通，谢谢 +1，但我非常不想在 str 中添加任何其他内容
您也可以将 pre 放在 $str 周围，这样您就不必修改 var

【解决方案2】：

您也可以将.replace() 用作：

let str = `

          Woke up this morning,
           
           ate a baguette,
           
           smiled at a person and they smiled back.`

let html = `<div>Dreamfit:</div><div>${str.replace(/\n/g, '<br>')}<div>`

document.getElementById("example").innerHTML = html

&lt;div id="example"&gt;&lt;/div&gt;

在此处单独查看基本部分：str.replace(/\n/g, '<br>')。

【讨论】：

【解决方案3】：

您需要使用white-space: pre-wrap 设置div 的样式：

所以你的代码应该是这样的：

let str = `

          Woke up this morning, 
ate a baguette,
           
           smiled at a person and they smiled back.`

document.getElementById("example").innerHTML = `<div>Dreamfit:</div><div style="white-space: pre-wrap;">${str}<div>`

&lt;div id="example"&gt;&lt;/div&gt;

【讨论】：

我投赞成票，这是正确的做法......而且，我总是提倡使用 classes 而不是内联样式，所以我推荐@ 987654325@ 或任何有意义的类来描述什么 div 包含（类应该是关于 semantics，而不是样式）
@StephenP 完全同意你的观点，我只是不想让我的答案更加复杂，而是专注于解决问题。