如何在JSON数组对象中添加<a>标签并在EJS页面正常渲染及修复手风琴问题

问题1：JSON中的a标签无法渲染为可点击链接 #

原因 #

EJS 模板中 <%= %> 语法默认会对输出内容做HTML转义处理，会把<、>这类标签字符转成实体编码，避免XSS攻击，所以你写的a标签会直接显示源码。

解决方法 #

把输出description的语法换成支持输出原始HTML的 <%- %> 即可，修改对应代码：

<!-- 原代码 -->
<p class="card-text" ><%= powerUpList[i].description%></p>
<!-- 修改后 -->
<p class="card-text" ><%- powerUpList[i].description%></p>

注意：如果你的description字段是来自用户可输入的内容，直接输出原始HTML存在XSS注入风险，你当前是自己维护的静态JSON内容，可放心使用该方案。

问题2：手风琴组件无法正常关闭 #

原因 #

你的Bootstrap手风琴配置参数不符合官方要求，存在三个错误点：

1. 所有折叠面板都默认加了show类，导致初始状态全部展开，没有对应闭合状态的配置
2. 头部点击链接的href、aria-controls属性取值错误，没有正确关联对应折叠面板
3. aria-expanded属性写死为true，状态匹配错误

解决方法 #

调整手风琴的属性配置，修改后完整代码如下：

<div class="col-md-9" id="root">
  <div role="tablist" id="accordion-1">
    <%for (var i = 0; i < powerUpList.length; i++) { %>
      <div class="card">
        <div class="card-header" role="tab" id="heading-<%= i %>">
          <a data-toggle="collapse" 
             aria-expanded="<%= i === 0 ? 'true' : 'false' %>" 
             aria-controls="collapse-<%= i %>" 
             href="#collapse-<%= i %>">
             <%= powerUpList[i].name%>
          </a>

          <%if (powerUpList[i].status == 0) { %>
              <a class="live-lable status-live" >
                Live 
              </a>
            <%}else if(powerUpList[i].status == 1){-%>
              <a class="live-lable status-comingsoon" >
                Coming soon 
              </a> 
            <%}else if(powerUpList[i].status == 2){-%>
              <a class="live-lable status-beta" >
                In-Beta 
              </a> 
            <%}-%>
        </div>
        <div id="collapse-<%= i %>" 
             class="collapse <%= i === 0 ? 'show' : '' %> item-<%= i+1 %>" 
             role="tabpanel" 
             data-parent="#accordion-1"
             aria-labelledby="heading-<%= i %>">
            <div class="card-body">
                <p class="card-text" ><%- powerUpList[i].description%></p>
            </div>
        </div>
      </div>
    <%}-%>
  </div>
</div>

如果不需要默认展开第一个面板，删除判断i===0添加show、aria-expanded=true的逻辑即可。

内容的提问来源于stack exchange，提问作者deepak j