vue的v-html指令+JS正则表达式处理带有富文本html内容

后台返回代码如下

<p><span style="color: rgb(51, 51, 51); text-transform: none; text-indent: 0px; letter-spacing: normal; font-family: " microsoft yahei font-size: font-style: normal font-weight: word-spacing: float: none display: inline white-space: orphans: widows: font-variant-ligatures: font-variant-caps: text-decoration-style: initial text-decoration-color:>该公司成立于2006年7月，是一家基于人力资源行业、为客户提供一站式、标准化人力资源解决方案的专业化公司，主要业务包括劳务派遣、生产作业外包、岗位外包、人力资源外包、人力资源管理咨询、猎头、培训、后勤管理等，形成人力资源生态服务全产业链，是山东省较早从事人力资源外包的专业人才服务机构之一。同时也是“一秒招聘”平台项目的合作运营商。 公司集大数据技术支持、智慧应用、创业指导、创业测评、管理咨询、猎头服务、培训为一体，与南京大学合作开展成果转移转化工作站，是山东省服务行业的领跑者。 公司注重创新发展，于2017年建设了《日照市HR服务信息化工程技术研究中心》，中心聘任“千人计划”专家张涛为创新技术带头人，研发的智能人力资源服务平台,获得全国创新产品奖。中心先后从国内知名网络公司引进7名高层次专业技术人才加入公司研发团队，加快推动行业数据深挖和智慧应用，截止目前，参与国家级项目研发1项，省级项目2项，授权知识产权17件。 公司先后获得“山东省人力资源诚信服务示范机构”（省人社厅）、“山东省服务名牌”（省质监局）、“放心职业介绍机构”（市人社局）、“全区服务业先进企业”（东港区政府）、“最具品牌影响力的人力资源服务机构”（市人力资源管理协会）、“山东省服务业创新中心”（省发改委）等荣誉称号。</span></p>

未做任何处理，直接在前台页面显示的效果如下：文本中有<、>以及<

image.png

解决办法

步骤一：使用js的replace函数+正则表达式替换富文本内容

created: function() {
  // post_content存储的为后台返回的内容。
  // showContent存储的是要显示到页面上的内容
  this.showContent = this.delHtml(this.info.post_content);
  console.log("正则后的内容："  +this.showContent);
},
methods: {
   delHtml:function (origStr){ 
      var delStr = "";
      if(origStr.length == 0) return "";
        // 只针对以上富文本内容做了匹配替换处理，当然你也可以根据具体的内容再加处理逻辑。

        // g表示替换所有的< 
        // gi表示忽略大小写替换所有的<
        // 只有<的话，表示只替换第一个<
        delStr = origStr.replace(/</g,"<"); 
        delStr = delStr.replace(/>/g,">");
        delStr = delStr.replace(/"/g,"'");
        return delStr; 
   }
},
 data() {
    return {
      showContent:""
    };
  }

步骤一的log输出内容如下：可以看到步骤一之后，标签显示出来了

该公司成立于2006年7月，是一家基于人力资源行业、为客户提供一站式、标准化人力资源解决方案的专业化公司，主要业务包括劳务派遣、生产作业外包、岗位外包、人力资源外包、人力资源管理咨询、猎头、培训、后勤管理等，形成人力资源生态服务全产业链，是山东省较早从事人力资源外包的专业人才服务机构之一。同时也是“一秒招聘”平台项目的合作运营商。 公司集大数据技术支持、智慧应用、创业指导、创业测评、管理咨询、猎头服务、培训为一体，与南京大学合作开展成果转移转化工作站，是山东省服务行业的领跑者。 公司注重创新发展，于2017年建设了《日照市HR服务信息化工程技术研究中心》，中心聘任“千人计划”专家张涛为创新技术带头人，研发的智能人力资源服务平台,获得全国创新产品奖。中心先后从国内知名网络公司引进7名高层次专业技术人才加入公司研发团队，加快推动行业数据深挖和智慧应用，截止目前，参与国家级项目研发1项，省级项目2项，授权知识产权17件。 公司先后获得“山东省人力资源诚信服务示范机构”（省人社厅）、“山东省服务名牌”（省质监局）、“放心职业介绍机构”（市人社局）、“全区服务业先进企业”（东港区政府）、“最具品牌影响力的人力资源服务机构”（市人力资源管理协会）、“山东省服务业创新中心”（省发改委）等荣誉称号。

步骤一的页面显示效果：可以看到<、>以及<被转成标签了

image.png

步骤二：使用vue的v-html指令将含有标签的字符串转化为html页面显示

步骤二的内容如下

image.png

步骤二的页面效果

image.png