正则表达式获取图片地址及超链接

最新推荐文章于 2024-07-17 09:07:13 发布

义龙陳序员

最新推荐文章于 2024-07-17 09:07:13 发布

阅读量2.4k

点赞数

分类专栏：前端文章标签： js 正则表达式

本文链接：https://blog.csdn.net/nahancy/article/details/109541252

版权

前端专栏收录该内容

11 篇文章 0 订阅

订阅专栏

最近有这么个需求，要获取图片中的图片地址及超链接地址，有的图片有超链接，有的图片没有，如：

<div id="main">
	<ul>
		<li>
			<a href="http://www.guizhou.gov.cn" style="padding: 10px;"><img src="images/slides/1.jpg" alt="" /></a>
		</li>
		<li>
			<img src="images/slides/2.jpg" alt="" />
		</li>
		<li>
			<a href="http://www.gzylxq.cn/" class=""><img src="images/slides/3.jpg" alt="" /></a>
		</li>
		<li>
			<img src="images/slides/4.jpg" alt="" />
		</li>	
		<li>
			<a href="http://www.gznc.edu.cn" class="last" title=""><img src="images/slides/5.jpg" alt="" /></a>
		</li>					
	</ul>

</div>

采用正则表达式匹配，发现不能一步到位，有超链接的和没有超链接的得分开（可能还有更优的解决方案），先将a标签解析出来，得到：<a href="http://www.guizhou.gov.cn" style="padding: 10px;"><img src="images/slides/1.jpg" alt="" /></a>，通过正则就可以匹配出a标签的href地址和<img src="images/slides/1.jpg" alt="" />，正则再解析就可以得到images/slides/1.jpg，接下来将已经匹配解析的a标签的内容从原始html字符串中替换掉，这样就只剩img标签了，再解析剩下的html字符串就可以得到想要的内容年。

完整代码如下：

<!DOCTYPE html>
<html>
<head>
<title>js正则表达式获取图片地址及超链接</title>
<meta charset="utf-8" />
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head> 

<body> 
<div id="main">
	<ul>
		<li>
			<a href="http://www.guizhou.gov.cn" style="padding: 10px;"><img src="images/slides/1.jpg" alt="" /></a>
		</li>
		<li>
			<img src="images/slides/2.jpg" alt="" />
		</li>
		<li>
			<a href="http://www.gzylxq.cn/" class=""><img src="images/slides/3.jpg" alt="" /></a>
		</li>
		<li>
			<img src="images/slides/4.jpg" alt="" />
		</li>	
		<li>
			<a href="http://www.gznc.edu.cn" class="last" title=""><img src="images/slides/5.jpg" alt="" /></a>
		</li>					
	</ul>

</div>
<script type="text/javascript">

function getImgTargetUrl(htmlstr){
   //定义正则表达式
    var patternTagA = /<a[^>]*href=['"]([^"]*)['"][^>]*>(.*?)<\/a>/gim;
    var patternTagImgSrc = /<img.+?src=('|")?([^'"]+)('|")?(?:\s+|>|\/>)/gim;
    var patternTagImg = /<img [^>]*src=['"]([^'"]+)[^>]*>/gim;
	var imgsrcArr=[];
    
    //解析a标签中的图片
    var tagAImgArr = htmlstr.match(patternTagA);
    console.log(tagAImgArr);
    if(typeof(tagAImgArr)!=undefined && typeof(tagAImgArr)!='undefined' && tagAImgArr!=null){
        for(var i=0;i<tagAImgArr.length;i++){
            var item = patternTagA.exec(tagAImgArr[i]);
            if(typeof(item)!=undefined && typeof(item)!='undefined' && item!=null){
                var imgArr = patternTagImg.exec(item[2])
                if(typeof(item)!=undefined && typeof(item)!='undefined' && item!=null){
                    imgsrcArr.push({
		                ele:item[0],
		                targeturl:item[1],
		                imgurl:imgArr[1]
	                });
	            }
	            //设置lastIndex = 0
                patternTagImg.lastIndex = 0;
	        }
            //设置lastIndex = 0
            patternTagA.lastIndex = 0;
        }
    }
    //将已经解析过的a标签内容过滤掉，继续匹配没有a标签的图片
    var tagImgArr = htmlstr.replace(patternTagA,"").match(patternTagImg);
    if(typeof(tagImgArr)!=undefined && typeof(tagImgArr)!='undefined' && tagImgArr!=null){
        for(var j=0;j<tagImgArr.length;j++){
            var item = patternTagImg.exec(tagImgArr[j]);
            if(typeof(item)!=undefined && typeof(item)!='undefined' && item!=null){
                imgsrcArr.push({
		            ele:"",
		            targeturl:"",
		            imgurl:item[1]
                });
            }
            //设置lastIndex = 0
            patternTagImg.lastIndex = 0;
        }
    }
    console.log("imgsrcArr:",imgsrcArr);
    return imgsrcArr;
}
getImgTargetUrl($("#main").html());
</script>
</body> 
</html>

最终解析出来的数据如下：