Javascript 在 VueJS 中渲染换行符
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/36729634/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Rendering newline character in VueJS
提问by Swimburger
I'm creating a note app where users can add a note by entering multiline text in a textarea. When I save the note in Firebase it is being saved with newline (\n) characters which I want to visualize.
我正在创建一个笔记应用程序，用户可以通过在 textarea 中输入多行文本来添加笔记。当我将笔记保存在 Firebase 中时，它会使用我想要可视化的换行符 (\n) 字符进行保存。
Therefore, I wrote a filter that replaces these characters with <br />and that works great.
Though, now I need to render my data using {{{note.content}}}and a user can inject HTML, CSS, and JS that will be executed.
Should I use something like DOMPurifyto validate the content or is there a way to safely render newline characters?
因此，我编写了一个过滤器来替换这些字符<br />，效果很好。
不过，现在我需要使用来呈现我的数据，{{{note.content}}}并且用户可以注入将要执行的 HTML、CSS 和 JS。
我应该使用DOMPurify 之类的东西来验证内容还是有办法安全地呈现换行符？
采纳答案by Shelvacu
Wrap the content in a preelement.
将内容包装在一个pre元素中。
A <pre>element will preserve whitespace within it, eg:
一个<pre>元素将预先在它服务的空白，如：
This is followed by a newline,
not that you can tell
<br />
<br />
<pre>You can see the newline after me!
Woohoo!</pre>
Will result in:
会导致：
This is followed by a newline, not that you can tell
You can see the newline after me!
Woohoo!
This way, you do not need to do any filtering of newlines.
这样，您不需要对换行符进行任何过滤。
回答by Krzysiek
As @shelvacu said the <pre>html tag preserves whitespaces.
正如@shelvacu 所说，<pre>html 标签保留了空格。
However using it has one serious disadvantage:the tag itself inherits plenty of unnecessary styling from CSS frameworks that are used in project (e.g. Bootstrap).
然而，使用它有一个严重的缺点：标签本身从项目中使用的 CSS 框架（例如 Bootstrap）继承了大量不必要的样式。
To preserve whitespaces and avoid inheriting any unnecessary styles use:
要保留空格并避免继承任何不必要的样式，请使用：
<span style="white-space: pre;">Some whitespaced content</span>
what will act exacly like the <pre>tag.
什么将完全像<pre>标签一样。
Be aware that white-space: preremains text 'as it is' - if you would like to have additional line break when it's necessary use: white-space: pre-wrap.
请注意，white-space: pre保留文本“原样” - 如果您想在必要时使用额外的换行符：white-space: pre-wrap.
回答by Swimburger
After actually describing my problem I got the idea the use the pre-tag which is for preformatted text. This tag will respect '\t\n' characters and render the text correctly out of the box! Though the sentences don't get broken automatically and overflow the width. With some CSS I was able to get the same behaviour that other elements have.
在实际描述了我的问题之后，我想到了使用用于预格式化文本的预标签。此标签将尊重 '\t\n' 字符并正确呈现文本开箱即用！尽管句子不会自动中断并溢出宽度。使用一些 CSS，我能够获得与其他元素相同的行为。
html:
html：
{{note.content}}css:
css：
.note pre {
white-space: pre-wrap;
word-wrap: break-word;
font-family: inherit;
}
回答by Shiva127
Use white-space: pre-line;CSS property.
使用white-space: pre-line;CSS 属性。
As write in Mozzila Docfor pre-linevalue:
作为写Mozzila文档的pre-line价值：
Sequences of white space are collapsed. Lines are broken at newline characters, at
<br>, and as necessary to fill line boxes.
空白序列被折叠。换行符、 at
<br>和必要时换行以填充行框。
回答by Ardhi
I'm able to make it work with backticks (`)
我可以使用反引号 (`)
<pre>{{textRenderedAsItIs}}</pre>
data():{
return{
textRenderedAsItIs:`Hello
World`
}
}
回答by V.Tran
Convert \n to
将 \n 转换为
if (this.content.my_val && this.content.my_val !== '') {
return this.content.my_val.replace(/\n/g, '<br />')
}
