在 VueJS 中渲染换行符

Question

我正在创建一个笔记应用程序，用户可以通过在文本区域中输入多行文本来添加笔记。当我将笔记保存在 Firebase 中时，它会使用我想要可视化的换行符 (\n) 进行保存。

因此，我编写了一个过滤器，将这些字符替换为 <br /> 效果很好。

不过，现在我需要使用 {{{note.content}}} 来呈现我的数据，并且用户可以注入将执行的 HTML、CSS 和 JS。

我应该使用像 DOMPurify 这样的东西来验证内容还是有办法安全地呈现换行符？

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

Answer 1

将内容包装在 pre 元素中。

--- <pre> 元素将保留其中的空白，例如：

 This is followed by a newline,
not that you can tell
<br />
<br />
<pre>You can see the newline after me!
Woohoo!</pre>

将导致：

 This is followed by a newline, not that you can tell

You can see the newline after me!
Woohoo!

这样，您不需要对换行符进行任何过滤。

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

Answer 2

正如@shelvacu 所说， <pre> html 标签保留了空格。

然而，使用它有一个严重的缺点： 标签本身从项目中使用的 CSS 框架（例如 Bootstrap）继承了大量不必要的样式。

要保留空格并避免继承任何不必要的样式，请使用：

 <span style="white-space: pre;">Some whitespaced content</span>

什么会完全像 <pre> 标签。

请注意 white-space: pre 保持文本“原样” - 如果您想在必要时使用额外的换行符： white-space: pre-wrap 。

参见： w3schools.com CSS white-space 属性

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