正则匹配出img标签的src地址

547 阅读1分钟

需求:将富文本中的图片网络地址,正则匹配出来,上传到内部服务器

vue template

<RtfVue :rtf="attr.rtf" :tinymce_config="tinymce_config" @rtfChange="rtfChange" />
methods: {
    async replaceImgSrc(rtf) {
      // 匹配出img
      let imgReg = /<img.*?(?:>|\/>)/gi
      let matchImg = rtf.match(imgReg)
      // 匹配出src地址
      let srcReg = / src=[\'\"]?([^\'\"]*)[\'\"]?/i
      if(!matchImg) {
        return rtf
      }
      let srcArr = matchImg.map(str => {
        if(!str.match(srcReg)[1].startsWith('/')) {
          return str.match(srcReg)[1]   
        }
      }).filter(src => !!src)
      if (srcArr.length == 0) {
        return rtf
      }
      let replacedValue = rtf
      for (let i = 0; i < srcArr.length; i++) {
        let convertImg
        try {
          convertImg = await this.covertImgSrc(srcArr[i])
        } catch (error) {
          convertImg = srcArr[i]
        }
        replacedValue = replacedValue.replaceAll(srcArr[i], convertImg) 
      }
      return replacedValue
    },
    async covertImgSrc(item) {
      let uploadUrl
      try {   
        //上传到后端服务器
        uploadUrl = await picUpload({file: item}, 'url')
      } catch (error) {
        uploadUrl = { uploadUrl: item }
      }
      return uploadUrl.url_path
    },
    async rtfChange(_rtf) {
      let rtf = await this.replaceImgSrc(_rtf)
      // console.log('本地rtf发生变化,通知父级更新', this.rtf)
      this.UpdateAttr({ attr: { rtf }, bkId: this.bkId })
    },
  },