Next.js中ReactHtmlParser解析转义富文本不生效如何解决

接口返回的description字段经过了两层HTML实体转义：

• 原始富文本内容为<p><strong>Hello admin <em>Lorem Ipsum dummy text</em></strong></p>
• 第一次转义将尖括号转为</>，得到<p><strong>...格式
• 第二次转义将转义字符里的&进一步转为&，最终得到接口返回的<p>...格式
  ReactHtmlParser仅能识别标准HTML标签，无法解析多层转义后的实体字符，因此会直接将标签作为纯文本展示。

• 第一步：编写HTML实体解码函数，循环解码还原多层转义的内容为标准HTML字符串

const decodeHtmlEntities = (content) => {
  const textareaEl = document.createElement('textarea');
  let decodedContent = content;
  // 循环处理，直到所有转义实体都被还原
  while (decodedContent.includes('<')) {
    textareaEl.innerHTML = decodedContent;
    decodedContent = textareaEl.value;
  }
  return decodedContent;
};

该实现基于浏览器原生能力，无需引入额外依赖，不会执行内容里的脚本代码，无额外XSS风险。

• 第二步：渲染前先对内容做解码，再传入解析器

{ReactHtmlParser(decodeHtmlEntities(post.description))}

如果富文本内容来自用户提交，务必在PHP接口层做XSS过滤，仅保留p、strong、em、ul、ol、li等排版相关的白名单标签，彻底移除script、iframe、on事件属性等危险内容，避免恶意代码注入。

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