玉石 - 将换行符转换为 <br/> 并保持内容编码

Question

我还不太熟悉Jade模板引擎。有没有一种方法可以将换行符（例如\n）转换为br标记，同时保持其他内容编码不变呢？

例如：

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

应用于编码值上的方法应该可以解决这个问题。然而，我不确定如何对值进行编码并得到结果。是否有任何辅助工具可用？

- Petur Subev

Answer 1

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

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

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

我不知道是否有适合您用例的内置功能。

---

看起来 Pug 已经取消了转义函数，所以现在你需要使用以下内容:

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

- dave

---

这就是我所说的！谢谢伙计。 - Petur Subev

那不是Jade的方法。由于模板编译为JS函数，因此可以在其内部使用任何node和V8全局变量。 - Aleksei Zabrodskii

虽然可以使用全局方法，但这并不是全局转义方法。全局转义方法会对每个<返回%3C，而不是像Jade的转义方法一样返回<。 - dave

@dave 抱歉，我不知道这件事。谢谢。 - Aleksei Zabrodskii

尝试在我的模板中格式化Pug错误消息，.message !{message.replace(/\n/g, '<br/>')}就足够了。 - flaudre

如果 message 包含 <, > 或 &，那么它们将无法正确转义。显然，在 pug 中，escape 是全局方法，因此您必须手动替换上述字符：.message !{message.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;').replace(/\n/g, '<br/>')} - dave

Answer 2

如果您不是特别需要 <br>标签，可以将您的文本放在<pre>标签内。所有空格（包括换行符）都将按输入的方式显示。

或者您可以设置CSS规则white-space: pre来保留空格格式。请参阅MDN了解更多信息。

- eagor

---

与 word-wrap: break-word; 结合使用。 - izolate

word-wrap: break-word 如果没有可接受的点，会在任意点上断开单词。如果您只想要简单的文本格式，并将单词换行到下一行，请尝试使用 white-space: pre-wrap。 - Damon Aw

在这种情况下，最好使用 white-space: pre-line。 - tremby

Answer 3

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

MDN表示escape已被弃用，它是用于在url中编码字符串而不是html内容的。另一个解决方案，

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

- Palani

---

不幸的是，这将留下一个尾随换行符。 - tremby

Answer 4

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

最终结果：

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

注意: 如果您想要转义其他字符，您可以添加以下内容:
.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;')

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

- Luke

Answer 5

考虑是否真的需要使用<br>标签。

如果可以使用CSS，最好使用white-space: pre-line。请参见MDN页面，其中说道：

pre-line

空格序列被折叠。在换行符、<br>和必要时断行以填充行框。

这与正常行为相同，除了换行符会变成换行符。

这应该能做到你想要的。

如果您想要<br>标签

所有现有的答案都提供了<br>标签，但它们要么不对HTML进行转义（可能是危险的），要么重新实现转义逻辑，要么留下尾随换行符。

这个答案基于Palani的回答，但不会留下尾随换行符，并且还防止foo为空或为false。

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

我不是很喜欢这个解决方案，但如果你需要使用<br>标签，我认为它比其他解决方案更好。

如果您需要传递大字符串，请考虑为split的结果创建一个临时变量，以免重复执行。

- tremby

Answer 6

这很简单：

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

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

- Dima

---

它没有转义someString变量，现在它可以呈现丰富的HTML内容，例如XSS :( - sarkiroka