node.js - Jade - 将新行转换为
并保持内容编码

Question

我对 Jade 模板引擎还不是很熟悉。有没有办法将新行（如\n ）转换为br标签，同时保持其他内容的编码？

例如

.replace(/\n/g,'</br>')

应用于编码值应该可以完成工作。但是我不确定如何对值进行编码并获得结果。有什么帮手吗？

score 15 · Accepted Answer

您可以使用翡翠转义方法并替换返回值中的换行符，如下所示：

p !{escape(foo).replace(/\n/g, '<br/>')}

我不知道您的用例有任何内置功能。

看起来 pug 摆脱了转义功能，所以这就是你现在必须使用的：

p !{foo.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;').replace(/\n/g, '<br/>')}

score 12 · Accepted Answer

如果你不完全需要<br>，你可以简单地将你的文本放在<pre>标签内。所有空格（包括新行）都将显示为已键入。

或者您可以设置 css 规则white-space: pre以保留空白预格式化。检查MDN。

score 9 · Accepted Answer

转义方法，甚至将简单的空格（''）字符转换为“%20”。

MDN 说转义已被弃用，它用于在 url 中编码字符串，而不是 html 内容。另一种解决方案，

each line in foo.split(/\n/)
  = line
  br

score 1 · Accepted Answer

大多数答案说你需要做p !{foo.replace(/\n/g)}。但是，这还不够：\nin 正则表达式匹配换行符，因此您需要转义\in \n。您可以通过添加附加\到\n.

最终结果：

p !{foo.replace(/\\n/g, '<br />')}

注意：如果您也想转义其他字符，您可以添加：
.replace(/&/g, '&').replace(/</g, '<').replace(/>/g, '>')

编辑：
您可以使用p #{foo.replace...}正确转义 html 标签中的所有字符。如果您想防止用户<script>...</script>在输入字段中插入标签来入侵您的网站，这可能会很有用。

score 0 · Accepted Answer

考虑你是否真的想要<br>标签。

如果您可以改用 CSS

最好使用white-space: pre-line. 查看MDN 页面，上面写着

pre-line

空白序列被折叠。在换行符处、在处<br>和根据需要填充行框时会换行。

这与正常行为相同，只是换行符变成换行符。

这应该做你想要的。

此处提供<br>标签的所有现有答案要么不转义 HTML 的输出（这可能很危险），要么重新实现转义逻辑，要么留下尾随换行符。

这个基于帕拉尼的回答，但没有留下尾随换行符，并且还可以防止foo无效或错误。

each line in (foo || '').split('\n').slice(0, -1)
  = line
  br
= (foo || '').split('\n').pop()

我不喜欢这个解决方案，但如果你想要<br>标签，我认为它比其他解决方案更可取。

如果您可能要通过它放置大字符串，那么为结果创建一个临时变量可能是个好主意，split因此它不会执行两次。

score -1 · Accepted Answer

你可以这样做：

p !{someString.replace(/\n/g, '<br/>')}

请注意，此方法将正确转义字符串。