Mustache.js 只允许换行，转义其他 HTML答案

【问题标题】：Mustache.js allow only line breaks, escape other HTMLMustache.js 只允许换行，转义其他 HTML
【发布时间】：2014-02-10 15:56:02
【问题描述】：

我正在根据用户输入创建 cmets，并在用户单击“提交”后使用 Mustache.js 呈现它们。我意识到我可以将用户输入换行符 (\n) 替换为 <br/> 以呈现为 HTML 换行符，例如

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

我意识到我可以通过使用三方括号使 Mustache 不转义 HTML

{{{myString}}}

但是，我想转义所有用户 HTML，就像 Mustache 通常使用双括号 {{ ... }} 一样，除了允许使用 <br/> 换行

最好的方法是什么？我可以在渲染后替换换行符，但这似乎是一个非常低效的解决方案，我认为必须有更好的方法。

【问题讨论】：

【解决方案1】：

如果您希望在文本区域中添加换行符，您需要将 \n 替换为

【讨论】：

如果我使用这个text.replace(/\n\r?/g, '&#13;&#10'); 应该像<textarea>{{{ response.data.descriptionParser }}}</textarea> 那样渲染吗？但仍然没有换线...

【解决方案2】：

选项 1 - 使用前置标记：

实际上最好（或有效）将文本包装在 <pre></pre> 标记中，这样可以保留文本中的空白。

并启用自动换行

选项 2 - 将您的字符串分成几行，每行使用一个小胡子：

comment = userComment.split("\n")


{{#comment}}
    {{comment}}<br/>
{{/comment}}

选项 3 - 在注入
标签之前使用 favorite method 手动转义字符串：

var div = document.createElement("div")
div.textContent = comment
comment = div.innerHTML.replace(/\n/g, "<br/>")


{{{comment}}}

【讨论】：

我真的不想保留所有的空白，而只是换行。我也设置了一个快速测试，似乎我无法让

 标记实际自动换行（即使它已明确设置），因此文本超出了边界并流动 DOM 元素。跨度>