在Underscore.js模板的table td中显示HTML标签纯文本的方法

你遇到的问题是Underscore.js模板的插值语法特性导致的：

• Underscore.js模板提供三种插值标记：
  • <%= %>：直接输出原始内容，不会对HTML特殊字符做转义，所以内容里的标签会被浏览器解析为真实DOM元素
  • <%- %>：自动对输出内容做HTML转义，会将<、>、&等特殊字符转为对应的HTML实体，浏览器不会将其解析为标签，会原样显示文本
  • <% %>：用于执行JavaScript逻辑，不直接输出内容

方案1（最推荐）：替换插值语法 #

直接修改模板中的插值标记，将原来的<%= i %>替换为<%- i %>即可，修改后的模板对应代码如下：

<script type="text/template" id="tpl-html1">
   <div class="well">
       <table class="table">
           <tbody>
           <% _.each( target, function(i) {%>
               <tr>
                   <td>'<%- i %>'</td>
               </tr>
           <% }); %>
           </tbody>
       </table>
   </div>
</script>

这个方案是Underscore官方提供的原生能力，无需额外编写工具函数，同时默认规避了XSS注入风险，改造成本最低。

方案2：手动转义内容 #

如果需要保留<%= %>的使用场景，可以提前对数组中的字符串做HTML转义处理，再传入模板渲染，转义函数示例如下：

function htmlEscape(str) {
  return str.replace(/&/g, '&')
            .replace(/</g, '&lt;')
            .replace(/>/g, '&gt;')
            .replace(/"/g, '&quot;')
            .replace(/'/g, '&#039;');
}

处理数据时调用转义函数即可：

$( document ).ready(function() {
  var rawData = ["line 1 <button>test</button>","line 2"," line3"].map(htmlEscape);
  var data = { target:rawData };
  var template = _.template( $("#tpl-html1").text() );
  $("#output").append( template(data) );
})

内容的提问来源于stack exchange，提问作者Hoa.Tran