富文本编辑器 内容过滤 实体字符(html entity)处理

前言

遇到一个坑点，需求漏洞，富文本编辑器生成的内容，既要显示在文章里，还得过滤出正常文本去填入到列表描述中，因为后台没有描述这个字段，可以说是有点坑.

如果只用于html render，那在react中只要使用dangerouslySetInnerHTML这个属性就可以渲染html元素，但是这个内容是复杂的，包含了图片，各种字符，字体，大小不一致，所以说使用dangerouslySetInnerHTML是没办法在ui指定的描述内容区域正常显示的，那怎么解决这个问题呢？

效果对比

1. 直接嵌入到dangerouslySetInnerHTML，处理了字符实体，但是没有输出纯字符串

<p
  className={classnames['content']}
  dangerouslySetInnerHTML={{ __html: content }}
></p>

2. 过滤标签，显示内容字符串，但是这种方式并没有处理字符实体

<p
  className={classnames['content']}
>
  {noTagContent}
</p>

3. 过滤标签，显示内容字符串，再嵌入到dangerouslySetInnerHTML，完美（推荐）

<p
  className={classnames['news-list-item-content']}
  dangerouslySetInnerHTML={{ __html: noTagContent }}
></p>

结束语

觉得有用的话，还请点个赞哦！