Jade - 将新行转换为 <br/> 并保持内容编码

Question

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

例如

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

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

Answer 1

您可以使用翡翠转义方法并像这样替换返回值中的换行符：

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

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

---

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

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

Answer 2

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

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

Answer 3

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

MDN says escape is deprecated 用于编码 url 中的字符串，而不是 html 内容。 另一种解决方案，

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

Answer 4

大多数答案说你需要做p !{foo.replace(/\n/g)}。然而，这还不够：正则表达式中的\n 匹配换行符，因此您需要转义\n 中的\。您可以通过将额外的\ 添加到\n 来做到这一点。

最终结果：

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

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

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

Answer 5

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

如果你可以改用 CSS

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

pre-line

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

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

这应该做你想做的。

如果你想要<br>标签

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

这个基于Palani's answer，但不留下尾随换行符，并且还可以防止foo 无效或为假。

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

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

如果您可能要通过它输入大字符串，最好为split 的结果创建一个临时变量，这样就不会重复执行两次。

Answer 6

你可以这么简单：

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

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