如何在EJS模板中解析JSON数据中的自定义{it}标记为斜体样式

嘿，别担心，这个问题其实挺常见的，新手遇到这种自定义标记转义的问题很正常，我来一步步帮你搞定！

首先你得知道，你现在用的<%= example %>会让EJS自动把HTML标签转义成实体字符（比如把<i>变成<i>），所以就算你把{it}换成<i>，也只会显示成文字而不是真正的斜体。解决这个问题分两步：把自定义标记替换成HTML斜体元素，然后让EJS不转义输出这些HTML。

方法一：在EJS模板里直接处理（最快实现） #

你可以在模板里写一个简单的小函数，专门用来替换{it}和{/it}标记：

<% 
// 定义解析斜体标记的函数
function parseItalics(text) {
  // 用正则表达式把所有{it}...{/it}替换成<i>标签
  return text.replace(/{it}(.*?){/it}/g, '<i>$1</i>');
}
%>

<% if(sense[0][1].dt[1]){ 
const example = sense[0][1].dt[1][1][0].t; %>
<div class="col-12 sense-example-wrapper">
<!-- 用<%- %>输出不转义的HTML，这样<i>标签才会生效 -->
<p class="sense-example"><%- parseItalics(example) %></p>
</div>
<% } %>

这里的正则/{it}(.*?){/it}/g用了非贪婪匹配（.*?），就算你的文本里有多个{it}标记（比如"{it}狗{/it}和{it}猫{/it}"），也能精准匹配每一段需要斜体的内容，不会出错。

方法二：用CSS类替换（更灵活的样式控制） #

如果你想以后方便修改斜体的样式（比如加颜色、下划线），可以把<i>换成自定义CSS类：

<% 
function parseItalics(text) {
  return text.replace(/{it}(.*?){/it}/g, '<span class="custom-italic">$1</span>');
}
%>

然后在你的CSS文件里添加样式：

.custom-italic {
  font-style: italic;
  /* 还可以加其他样式，比如：
  color: #ff4444;
  text-decoration: underline;
  */
}

这样以后要改样式，直接动CSS就行，不用碰模板代码。

方法三：后端预处理（适合大量数据的情况） #

如果你的API返回很多带{it}标记的数据，也可以在后端（比如Node.js代码里）先把所有数据处理好，再传给EJS模板：

// 假设你已经从API拿到了data数组
data.forEach(item => {
  // 提前替换所有{it}标记
  item.t = item.t.replace(/{it}(.*?){/it}/g, '<i>$1</i>');
});
// 把处理好的data传给EJS模板
res.render('你的模板名', { sense: data });

然后模板里直接用<%- example %>输出就行，不用在模板里写函数了。

最后提醒一句：用<%- %>输出未转义的HTML时，要确保你的API数据是安全的（比如是你自己控制的数据源），避免XSS攻击。如果数据来自用户提交，最好先做一下HTML sanitize处理哦～

备注：内容来源于stack exchange，提问作者Juan Manuel Linares