element-ui给后台传过来的特殊文字加样式

后台数据

问题是给后台传过来的特殊文字加样式，最终结果

语义化标签v-html，为了解析后台的标签中文字

  <el-table-column prop="concatStr" label="创意" width="200">
          <template slot-scope="scope"> //scope等同于总数据的tableData
            <div v-html="scope.row.concatStr"></div>//row等同于下标
          </template>
        </el-table-column>
        

把{会计培训班}转化成 #会计培训班#

     var status = arr[i].ideaTitleStatus.replace(/{/g, "#").replace(/}/g, "#");

这里中文#和英文#都会识别

     var gz1 = /(#|＃)((?!#).)*(#|＃)/g;

插入你想要的样式标签，item就是这里的“会计培训班”，

      status = status.replace(/<[^>]*?>(.*?)/gi, "").replace(/(.*?)<\/[^>]*?>/gi, "").replace(gz1, (item) => {
        let newVal = '<span class="reds">' + item + "</span>";
            return newVal;
          });
          

最后把#去掉

   res.data.ideaReportVoList.concatStr = status.replace(/#/g, "")

参考链接：www.ucloud.cn/yun/98924.h…