通过正则获取html中img的url，将其上传到自己的服务器，并生成新的url替换原图片url

需求：将其他网站的文章复制到自己网站的编辑器的时候，图片地址是别人网站的，这时候需要获取到图片资源上传到本地服务器，并替换掉img的url

replacePicturePath (html) {
  let imgArr = []
  // 此处matchStr匹配的img标签的整体内容，groups匹配的是img中src的url
  // imgArr是要当前html中要批量上传的图片地址
  html.replace(/<img [^>]*src=['"]([^'"]+)[^>]*>/gi, (matchStr, groups, index, sourceStr) => {
    imgArr.push(groups)
    return matchStr
  })
  this.uploadImgs(imgArr, html)
},
uploadImgs (imgArr, html) {
  // 此处是由后台通过这些url获取到图片资源，再批量上传到我们的服务器，并返回生成的url
  uploadImgs(imgArr).then(res => {
    if (res.code === 0) {
      if (res.result && res.result.length > 0) {
        /**
         * res.result是用来到时候一一比对再做替换的图片数组对象，其中对象的数据结构是：
         * {
         *   primitiveVal: 图片的原始url,
         *   replaceVal: 图片上传之后生成的url
         * }
         */
        this.replaceImgUrl(html, res.result)
      } else {
        this.$message.warning('上传图片出错')
      }
    }
  }).catch(err => {
    this.$message.warning('上传图片出错')
  })
},
// 参数matchStr是每次正则匹配到的字符串，这是固定的
// 参数groups是正则表达式捕获组匹配到的内容。若正则表达式没有捕获组则没有该参数，groups加个s的意思是这边可能有多个分组
// 参数index是匹配项在字符串中的开始下标（注意不是数组的下标）
// 参数sourceStr则是原字符串
replaceImgUrl (html, arr) {
  let replaceHtml = html.replace(
    /<img [^>]*src=['"]([^'"]+)[^>]*>/gi,
    (matchStr, groups, index, sourceStr) => {
      let tempStr = ""
      arr.forEach((val) => {
        if (val.primitiveVal === groups) {
          tempStr = matchStr.replace(
            /src=[\'\"]?([^\'\"]*)[\'\"]?/i,
            `src="${val.replaceVal}"`
          )
          // 解决图片跨域问题
          tempStr = tempStr.replace('crossorigin="anonymous"', '')
        }
      })
      return tempStr ? tempStr : matchStr
    }
  )
  return replaceHtml
}

使用方法：(可将三个函数封装到一个外部js中再进行引用)

this.replacePicturePath(curHtml)