本文介绍利用JavaScript正则表达式提取HTML字符串中所有图片标签及src地址的方法。通过两步策略：首先匹配img标签，再从中提取src属性。提供完整可运行的JS代码示例，并推荐正则表达式在线测试工具，帮助开发者快速实现图片资源抓取。
JavaScript正则提取图片及src地址方法
本文详细介绍一种利用JavaScript正则表达式从HTML内容中提取所有图片标签及其src地址的实现方案，供开发者参考。
在实际开发中，经常需要获取文章或页面内的图片资源，核心需求通常是获取图片的URL地址。为此，我们需要通过正则表达式匹配图片标签，从而提取出所需的数据。
正则表达式的使用频率虽不高，但容易遗忘。近期因项目需求重新查阅相关资料，发现网上信息繁杂且缺乏针对性。因此，整理一份简洁实用的实现方法以备后续使用。
目标：利用JavaScript正则表达式，从文本中匹配出所有图片标签，并提取每个图片的src属性值。
实现思路分为两步：第一步，使用正则表达式匹配出所有的img标签（即获取所有图片对象），并过滤掉无关字符；第二步，在匹配到的img标签结果中，循环提取图片的src属性值。
从第一步匹配出的img标签字符串中，进一步循环匹配并提取src属性的具体地址。
具体实现代码如下（可直接复制到本地环境测试）：
核心代码实现
<script type="text/javascript">
//思路分两步：作者（yanue）.
//1，匹配出图片img标签（即匹配出所有图片），过滤其他不需要的字符
//2.从匹配出来的结果（img标签中）循环匹配出图片地址（即src属性）
var str = "this is test string <img src=\"http:yourweb.com/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>此外，提供两款实用的正则表达式在线工具供参考使用：
JavaScript正则表达式在线测试工具： http://tools.jb51.net/regex/javascript
正则表达式在线生成工具： http://tools.jb51.net/regex/create_reg
希望上述内容能对您的JavaScript程序设计工作提供帮助。