在前端开发中，我们经常需要将文本数据渲染为HTML格式展示在页面上。但是有些情况下，我们需要将一些富文本数据以HTML格式呈现，如何实现呢？这时候就需要使用Mustache.js库。
Mustache.js简介
Mustache.js是一个轻量级的JavaScript模板引擎，它可以将JSON数据和HTML模板进行绑定，然后生成HTML字符串。它支持条件语句、循环语句等基本语法，非常适合用来构建动态网页。
Mustache.js默认的文本转义行为
在Mustache.js中，默认会对所有的变量输出进行HTML编码，以避免XSS攻击。例如，如果一个变量的值为<script>alert('hello');</script>，则在模板中输出时会被转义为<script>alert('hello');</script>。这样做是非常安全的，但也可能导致一些问题。
Mustache.js如何处理富文本数据
在一些场景下，我们不希望Mustache.js对变量值进行HTML编码，而是直接将其作为HTML标记渲染到页面上。比如我们想要在页面上展示一段富文本内容，其中包含了HTML标签，这时候就需要将这些标签原封不动地输出到页面上。
要实现这个功能，只需要在Mustache.js模板中使用{{{variable}}}语法即可。这种语法与基本语法{{variable}}的区别就是它不会对变量值进行HTML编码。例如：
---- -----------------------------------
在这个例子中，如果我们将content变量的值设为<p>这是一段富文本内容</p>，则它会被原封不动地渲染到.content元素中。
案例示范
下面是一个简单的示例，演示了如何使用Mustache.js渲染一段包含富文本数据的HTML代码：
--------- -----
------
------
----------- -- ---- -- -------------------
-------
------
---- ---------------
------- ----------------------------------------------------------------------------------------
--------
----- ---- - -
------ ------- --------
-------- -------- -- - --------------------- -------------
--
----- -------- - -
------------------
---- -----------------------------------
--
----- ---- - ------------------------- ------
---------------------------------------- - -----
---------
-------
-------在这个例子中，我们定义了一个数据对象data，其中包含了一个名为content的变量，它的值是一段富文本数据。然后我们定义了一个Mustache.js模板，并在其中使用了{{{content}}}语法。最后，我们调用Mustache.render()方法将数据对象和模板绑定起来，生成一个HTML字符串并插入到页面中。
总结
在Mustache.js中，使用{{{variable}}}语法可以直接将变量作为HTML标记输出到页面上，非常适合处理富文本数据。但是需要注意的是，这种做法可能会导致安全问题，因此在使用时需要慎重考虑。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/31062