js匹配<img>标签中的 src属性的值的正则怎么写？

Question

假如有一段html字符串，想用js直接匹配到<img>标签中的 src属性的值的正则怎么写？可以考虑带有class、alt这些属性。

'<div><img src="http://www.baidu.com/pic/a.jpg" alt="" /><p>this is a pic</p><img src=
"http://www.baidu.com/pic/b.jpg"/><p>this is pic b</p></div>'

想得到的结果

[
'http://www.baidu.com/pic/a.jpg',
'http://www.baidu.com/pic/b.jpg'
]

而不是

[
'<img src="http://www.baidu.com/pic/a.jpg" alt="" />',
'<img src="http://www.baidu.com/pic/b.jpg" />'
]

js的正则不支持逆序环视，想不出还有什么方法可以直接匹配到src的值，求大牛指教。

Answer 1

var frag = document.createElement('div');
frag.innerHTML = '<div>\
    <img src="http: www.baidu.com="" pic="" a.jpg" alt=""  ="">\
    <p>this is a pic</p>\
    <img src="http: www.baidu.com="" pic="" b.jpg" ="">\
    <p>this is pic b</p>\
</img src="http:></img src="http:></div>';
var result = [].map.call(frag.querySelectorAll('img'), function(img){ return img.src });

console.log(result);

另外，match 的话 g 模式不支持输出匹配结果的，你只能使用 while + exec 才行。

var str = '<div>\
    <img src="http: www.baidu.com="" pic="" a.jpg" alt=""  ="">\
    <p>this is a pic</p>\
    <img src="http: www.baidu.com="" pic="" b.jpg" ="">\
    <p>this is pic b</p>\
</img src="http:></img src="http:></div>';
var patt = /<img[^>]+src=['"]([^'"]+)['"]+/g;
var result = [], temp;

while( (temp= patt.exec(str)) != null ) {
    result.push(temp[1]);
}

console.log(result);</img[^>

Answer 2

不好意思，JS这部分我现在也是自己学，误会了你的意思。我去查了一下，有这样一个思路，你先匹配出img，然后再从中匹配出src

<script type="text javascript"="">
var str = "this is test string
<img src=\"http:yourweb.com test.jpg\"width="'50' ">123 and the end
<img src=\"所有地址也能匹配.jpg\" >
<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");
 }
}
</img.*?(?:></img src=\"></img src=\"所有地址也能匹配.jpg\" ></img src=\"http:yourweb.com></script type="text>