把手和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

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

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>