前端vue获取后端返回的富文本内容不是标签是转义字符解决方法

新手的我就直接上代码

template部分(UI框架用的vant)

<template>
  <div class="common-bg">
    <van-nav-bar title="消息中心" left-arrow :fixed="true" :placeholder="true" @click-left="onClickLeft" />
    <van-cell v-for="item in list" :key="item.id">
      <div>消息：{{ item.title }}</div>
      <div>时间：{{ item.createTime }}</div>
      <div v-html="change(item.content)"></div>
    </van-cell>
  </div>
</template>

script部分

data() {
    return {
      list: []
   }
methods: {
    initData() {
      getMessageList().then((res) => {
        console.log(res, '111');
        this.list = res.data
      })
    },
    onClickLeft() {
      this.$router.go(-1)
    },
    change(strValue) {
      console.log(strValue,'1');
      strValue = strValue.replace(/&/g, "&");
      strValue = strValue.replace(/&lt;/g, "<");
      strValue = strValue.replace(/&gt;/g, ">");
      strValue = strValue.replace(/&quot;/g, "\"");
      strValue = strValue.replace(/&#39;/g, "'");
      console.log(strValue,'2');
      return strValue;
    }
  }

实现效果

 

缺点在于如果还有需要替换别的转义字符的话，得自行添加，如果还有什么好方法，欢迎提醒

来源https://www.freesion.com/article/19891451326/