使用正则格式化HTML标签进行页面渲染

Posted 2022-07-19 小hu同学

需求：今天是做了1个需求，我在1个富文本里面编辑的文字，需要渲染到一个预览的PDF上展示 (Vue项目)

我在富文本存的文字内容给到后端时，是会带上标签的，比如<p></p>

这样我在根据后端返回的字段里面获取参数进行渲染
返回的数据如：title:<p>123456</p>

思路：
数据渲染 就是有 v-html 、v-text、，这几种
v-html

<li>4.其他建议</li>
//渲染数据
  <li v-for="item in curData.diseaseIntervene" :key="item.index">
      <span>item.diseaseName:
      // 使用v-html 进行渲染
      <span v-html="item.dietProposal"></span></span> 
   </li>

可以看到 我使用v-html 会将html标签进行解析，样式并不是想要的

v-text 或者，这样又将 标签直接展示出来了

解决办法可供参考：v-html="item.dietProposal.replace(/<[^>]+>/g, '')"

  <li v-for="item in curData.diseaseIntervene" :key="item.index">
      <span>item.diseaseName:
      <!-- 使用v-html 进行渲染 -->
      <!--使用正则匹配标签 替换为空 -->
      <span v-html="item.dietProposal.replace(/<[^>]+>/g, '')"></span></span> 
   </li>