javascript - js匹配<img>标签中的 src属性的值的正则怎么写?
怪我咯
怪我咯 2017-04-11 12:52:45
[JavaScript讨论组]

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

'

this is a pic

this is pic b

'

想得到的结果

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

而不是

[
'',
''
]

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

怪我咯
怪我咯

走同样的路,发现不同的人生

全部回复(3)
伊谢尔伦

不好意思,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");
 }
}
</script>

代码参考脚本之家:http://www.jb51.net/article/67464.htm
希望能帮到你

黄舟

用正则匹配 HTML 的人都应该被烧死好么!!!!

var frag = document.createElement('p');
frag.innerHTML = '<p>\
    <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>\
</p>';
var result = [].map.call(frag.querySelectorAll('img'), function(img){ return img.src });

console.log(result);

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

var str = '<p>\
    <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>\
</p>';
var patt = /<img[^>]+src=['"]([^'"]+)['"]+/g;
var result = [], temp;

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

console.log(result);
巴扎黑

请问如果这种方式匹配固定的src怎么写呢?

热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新 English
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号