在 HTML 字符串中保留换行符

Question

我使用 Angular 5 和 Firebase 存储和检索电影评论信息。创建和编辑评论时，会保留换行符（我假设使用 ngModel 与此有关）。但是，当从读者的角度检索评论时， ReviewComponent 不会保留换行符。记录主体仍然显示换行符并使用 Angular 的 json 管道显示为 text\n\ntext 显示换行符应该在哪里。

这是我的 HTML：

 <main role="main" class="container">
  <p style="margin-bottom: 2rem;">{{review.body}}</p>
</main>

我也尝试过 span 和 body 。

我怎样才能在评论中为读者保留这些换行符？

原文由 cfoster5 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

HTML 通常使用 br 标签来表示新行。一个普通的 textarea 标签不使用这个，它使用用户系统用来表示新行的任何内容。这可能因操作系统而异。

您最简单的解决方案是使用 CSS

 <main role="main" class="container">
  <p style="margin-bottom: 2rem;white-space:pre-wrap;">{{review.body}}</p>
</main>

这将保留任何“空白”格式，包括额外的空格。

如果您想实际用 br 标签替换换行符，您可以使用以下正则表达式

<main role="main" class="container">
  <p style="margin-bottom: 2rem;" [innerHTML]="review.body.replace(/(?:\r\n|\r|\n)/g, '<br>')"></p>
</main>

编辑 感谢 ConnorsFan 提醒您替换不使用插值。

原文由 Jon P 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

通过使用 [innerText] 指令，空白似乎得以保留，以及 \n 新行

例如 <small style="display:block" [innerText]="review.body"></small>

原文由 JustLearning 发布，翻译遵循 CC BY-SA 4.0 许可协议