我还不太熟悉Jade模板引擎。有没有一种方法可以将换行符(例如\n)转换为br标记,同时保持其他内容编码不变呢?
例如:
.replace(/\n/g,'</br>')
应用于编码值上的方法应该可以解决这个问题。然而,我不确定如何对值进行编码并得到结果。是否有任何辅助工具可用?
您可以使用Jade的转义方法,并替换返回值中的换行符,方法如下所示:
p !{escape(foo).replace(/\n/g, '<br/>')}
我不知道是否有适合您用例的内置功能。
看起来 Pug 已经取消了转义函数,所以现在你需要使用以下内容:
p !{foo.replace(/&/g, '&').replace(/</g, '<').replace(/>/g, '>').replace(/\n/g, '<br/>')}
word-wrap: break-word;
结合使用。 - izolateword-wrap: break-word
如果没有可接受的点,会在任意点上断开单词。如果您只想要简单的文本格式,并将单词换行到下一行,请尝试使用 white-space: pre-wrap
。 - Damon Awwhite-space: pre-line
。 - tremby转义方法,甚至将简单的空格(' ')字符转换为“%20”。
MDN表示escape已被弃用,它是用于在url中编码字符串而不是html内容的。另一个解决方案,
each line in foo.split(/\n/)
= line
br
大多数答案都说你需要执行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>
标签以便黑客攻击您的网站,这将非常有用。
<br>
标签。white-space: pre-line
。请参见MDN页面,其中说道:
这与正常行为相同,除了换行符会变成换行符。
pre-line
空格序列被折叠。在换行符、
<br>
和必要时断行以填充行框。
<br>
标签<br>
标签,但它们要么不对HTML进行转义(可能是危险的),要么重新实现转义逻辑,要么留下尾随换行符。foo
为空或为false。each line in (foo || '').split('\n').slice(0, -1)
= line
br
= (foo || '').split('\n').pop()
我不是很喜欢这个解决方案,但如果你需要使用<br>标签,我认为它比其他解决方案更好。
如果您需要传递大字符串,请考虑为split
的结果创建一个临时变量,以免重复执行。
这很简单:
p !{someString.replace(/\n/g, '<br/>')}
<
返回%3C
,而不是像Jade的转义方法一样返回<
。 - dave.message !{message.replace(/\n/g, '<br/>')}
就足够了。 - flaudremessage
包含<
,>
或&
,那么它们将无法正确转义。显然,在 pug 中,escape 是全局方法,因此您必须手动替换上述字符:.message !{message.replace(/&/g, '&').replace(/</g, '<').replace(/>/g, '>').replace(/\n/g, '<br/>')}
- dave