我正在创建一个笔记应用程序，用户可以通过在文本区域中输入多行文本来添加笔记。当我将笔记保存在 Firebase 中时，它会使用我想要可视化的换行符 (\n) 进行保存。
因此，我编写了一个过滤器，将这些字符替换为 <br />，效果很好。
不过，现在我需要使用 {{{note.content}}} 呈现我的数据，并且用户可以注入将执行的 HTML、CSS 和 JS。
我应该使用DOMPurify 之类的东西来验证内容还是有办法安全地呈现换行符？
【问题讨论】：
标签： javascript vue.js
正如@shelvacu 所说，<pre> html 标记保留了空格。
但是使用它有一个严重的缺点：标签本身从项目中使用的 CSS 框架（例如 Bootstrap）继承了大量不必要的样式。
要保留空格并避免继承任何不必要的样式，请使用：
<span style="white-space: pre;">Some whitespaced content</span>
与<pre> 标记完全一样。
请注意，white-space: pre 保持文本“原样” - 如果您想在必要时添加额外的换行符，请使用：white-space: pre-wrap。
【讨论】：
标签会改变大多数 css 框架的字体。
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!
这样，您不需要对换行符进行任何过滤。
【讨论】：
white-space css 属性，它有更多的选项。
white-space: break-spaces; 非常适合我。
【讨论】：
在实际描述了我的问题之后，我想到了使用用于预格式化文本的 pre-tag。此标签将尊重 '\t\n' 字符并开箱即用地正确呈现文本！ 尽管句子不会自动中断并溢出宽度。 使用一些 CSS，我能够获得与其他元素相同的行为。
html:
{{note.content}}
css:
.note pre {
white-space: pre-wrap;
word-wrap: break-word;
font-family: inherit;
}
【讨论】：
希望这能为新访问者增加价值。
I am big line with lots and lots of text which would make me not fit.
Line two ✌
Line three
<span style="white-space: pre-line">Your Content</span>
<span style="white-space: pre">Your Content</span>
参考及更多详情：https://css-tricks.com/almanac/properties/w/whitespace
【讨论】：
我并不是pre 的真正粉丝（调试除外！）所以这里有另一种使用v-for 来处理这个问题的方法。这样可以更轻松地调整格式（例如，您可能想要使用列表或其他不是 span 和 br 的东西）
<span
v-for="(line,lineNumber) of stringWithNewlines.split('\n')"
v-bind:key="lineNumber" >
{{ line }}<br/>
</span>
【讨论】：
我可以使用反引号 (`)
<pre>{{textRenderedAsItIs}}</pre>
data():{
return{
textRenderedAsItIs:`Hello
World`
}
}
【讨论】：
将\n转换为
if (this.content.my_val && this.content.my_val !== '') {
return this.content.my_val.replace(/\n/g, '<br />')
}
【讨论】：
你可以使用 v-html
<span v-html="yourContent"></span>
data():{
return{
yourContent: "Line 1 <br> Line 2"
}
}
【讨论】：