美文网首页
从富文本中获取图片视频的src

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

作者: 十一点后不在线 | 来源:发表于2020-12-09 17:16 被阅读0次

    第一种:
    常规的单纯找图片或者视频的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] })
        },
    

    相关文章

      网友评论

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

          本文链接:https://www.haomeiwen.com/subject/dknhgktx.html