vue中使用tinymce替换内容中a标签里href内容

最近在使用tinymce上添加链接的时候发现如果在添加链接的时候不添加http，或者https的链接在点击跳转的时候就会有问题，然后就想着如何解决这个问题。

一：发现问题

在富文本框中写的链接如：baidu.com 是会被默认为是字符串，不会添加上a标签来进行链接类的跳转的。如果写成www.baidu.com的时候就会是一个链接，添加上了a标签的链接类型，可以进行跳转。如果直接用工具中的插入/链接来添加的话虽然都是可点击的形态。但是点击后跳转的页面不一定都是地址的页面，而且用工具栏上添加的链接在输入www.baidu.com后保存时还会弹出一个提示用户是否需要加上http://: 前缀,这种是插件自带的就是会添加上外链的http://:。因为有的用户不一定会写www.，或者http、https开头的网址，就会导致出现链接中不含www.，或者http、https开头的网址的情况，F12查看后发现a标签中的href值是项目中的前缀/baidu.com,这种虽然感觉上是外链，但是却跳转不出去。现在就是要解决这种问题。

二：找方法解决问题

将文本框中的内容中含有的所有的a标签都处理了一下，替换所有的a标签中的href属性值。这里是在href值中没有含有http或者https时候就需要将这个值中添加上 ‘//’,这种点击的时候浏览器就会自动添加上http。

// a标签处理
aTags(inContent){
  // a标签
  var aReg = /<a.*?(?:>|/>)/gi;
  var atemp = inContent.match(aReg); // a数组
  var hrefReg = /href=['"]?([^'"]*)['"]?/g;
  if (atemp) {
    atemp.forEach((item, index) => {
      var hrefTemp = item.match(hrefReg); // src/data-src/...匹配带有src的数组
      const hrefValue = hrefTemp[0].replace("href=", "").replace(/"/g, "").replace(/&amp;/g, "&");
      if(!hrefValue.includes('http')&&!hrefValue.includes('https')){
        hrefTemp.forEach((element) => {
          inContent = inContent.replace(
            element,
            `href="//${hrefValue}"`//添加上 //
          );
        });
      }
      this.$emit('geEditor', inContent);
    });
  }else{
    this.$emit('geEditor', inContent);
  }
},
// 内容处理
change() {
  // this.$emit('geEditor', this.tinymceHtml);
  // console.log(this.tinymceHtml)
  this.aTags(this.tinymceHtml)
},

三：总结

可能会有更好的方法来进行处理了，但是这是我目前想到最好的方法了，由于对这个插件还不太属性，只能继续努力的去看看文档，更深入的学习啦。