从富文本中获取图片视频的src

第一种:
常规的单纯找图片或者视频的src,改下img或者video

var data = []
      this.postForm.content.replace(
        /<img [^>]*src=['"]([^'"]+)[^>]*>/g,
        function(match, capture) {
          data.push(capture)
        }
      )
return  data

第二种:
按顺序直接找出src,不管图片或者视频
思路分两步
1,匹配出图片img视频video标签,过滤其他不需要的字符
2.从匹配出来的结果中循环匹配出src属性(g表示匹配所有结果i表示区分大小写)

var data = []
// 图片视频
var imgReg = /(<img|<video).*?(?:>|\/>)/gi
// 匹配src属性
var srcReg = /src=[\'\"]?([^\'\"]*)[\'\"]?/i
var arr = this.postForm.content.match(imgReg)
// 避免富文本中无src时报错
if (arr) {
    for (var i = 0; i < arr.length; i++) {
         var src = arr[i].match(srcReg)
         // 获取图片地址
          if (src[1]) {
            // console.log('已匹配的地址' + (i + 1) + ':' + src[1])
            data.push(this.escape2Html(src[1]))
          }
        }
      }
return  data

src中有特殊符号富文本渲染时会自行转义,获取再转化下,得到正常的可以直接浏览器打开的src

// 转意符换成普通字符
    escape2Html(str) {
      var arrEntities = { 'lt': '<', 'gt': '>', 'nbsp': ' ', 'amp': '&', 'quot': '"' }
      return str.replace(/&(lt|gt|nbsp|amp|quot);/ig, function(all, t) { return arrEntities[t] })
    },

推荐阅读更多精彩内容