Handlbars和HTML

Question

我有一个包含以下数据的数据库条目：

"text": "Paragraph 1\n\nParagraph 2\n\nParagraph 3\n"

但是当我在handlebars中渲染时，如下所示：

<div>{{{text}}}</div>

我明白了：

Paragraph 1 Paragraph 2 Paragraph 3

但我期待：

Paragraph 1
Paragraph 2
Paragraph 3

是否有人能够帮助解释发生了什么？

Answer 1

您可以将\n替换为<br>，如下所示：

text.replace(/\n/g, "<br>");

Answer 2

HTML元素不保留换行符，您需要使用<br>，但是您可以使用<pre>

HTML <pre>元素定义了预格式化的文本。它保留了空格和换行符。

另外，由于你使用的是把手，你可以定义一个助手：

JS：

Handlebars.registerHelper('breaklines', function(text) {
    text = Handlebars.Utils.escapeExpression(text);
    text = text.replace(/(\r\n|\n|\r)/gm, '<br>');
    return new Handlebars.SafeString(text);
});

HTML模板：

<div>
    {{breaklines text}}
</div>