js正则匹配出所有图片及所有图片地址src

日期 2012年04月26日 17:00

分类 Web

标签 正则

浏览 10644

字数统计: 1090(字)

本文发布于 12 年前, 内容可能已经过时或失效!

文章目录

有很多时候我们需要用到文章里面的图片,而且主要是用到它的图片地址,这个时候我们需要通过正则匹配出图片标签,然后做到我们需要的数据

平时也没怎么用正则,一不学就忘,最近项目需要,然后又去google了,好乱!一搜一大堆,也不是我想要的,最后把自己留一个已被后用

实现:通过js正则匹配出所有图片及所有图片地址src。

思路:

1.匹配出图片img标签(即匹配出所有图片),过滤其他不需要的字符

2.从匹配出来的结果(img标签中)循环匹配出图片地址(即src属性)

代码:(你可以复制到本地试试)

<script type="text/javascript">
  //思路分两步:作者(yanue).
  //1,匹配出图片img标签(即匹配出所有图片),过滤其他不需要的字符
  //2.从匹配出来的结果(img标签中)循环匹配出图片地址(即src属性)
  var str = 'this is test string <img src="http:www.yanue.net/test.jpg" width=\'50\' > 123 and the end <img src="所有地址也能匹配.jpg" /> 33! <img src="/uploads/attached/image/20120426/20120426225658_92565.png" alt="" />'
  //匹配图片(g表示匹配所有结果i表示区分大小写)
  var imgReg = /<img.*?(?:>|\/>)/gi
  //匹配src属性
  var srcReg = /src=[\'\"]?([^\'\"]*)[\'\"]?/i
  var arr = str.match(imgReg)
  alert('所有已成功匹配图片的数组:' + arr)
  for (var i = 0; i < arr.length; i++) {
    var src = arr[i].match(srcReg)
    //获取图片地址
    if (src[1]) {
      alert('已匹配的图片地址' + (i + 1) + ':' + src[1])
    }
    //当然你也可以替换src属性
    if (src[0]) {
      var t = src[0].replace(/src/i, 'href')
      //alert(t);
    }
  }
</script>