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

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

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

采用正则表达式匹配，发现不能一步到位，有超链接的和没有超链接的得分开（可能还有更优的解决方案），先将a标签解析出来，得到：<a href="http://www.guizhou.gov.cn" style="padding: 10px;"><img src="data:images/slides/1.jpg" alt="" /></a>，通过正则就可以匹配出a标签的href地址和<img src="data: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="data:images/slides/1.jpg" alt="" /></a></li><li><img src="data:images/slides/2.jpg" alt="" /></li><li><a href="http://www.gzylxq.cn/" class=""><img src="data:images/slides/3.jpg" alt="" /></a></li><li><img src="data:images/slides/4.jpg" alt="" /></li>  <li><a href="http://www.gznc.edu.cn" class="last" title=""><img src="data: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 = 0patternTagImg.lastIndex = 0;}//设置lastIndex = 0patternTagA.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 = 0patternTagImg.lastIndex = 0;}}console.log("imgsrcArr:",imgsrcArr);return imgsrcArr;
}
getImgTargetUrl($("#main").html());
</script>
</body>
</html>

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

正则表达式获取图片地址及超链接相关推荐

instagram获取图片地址和视频地址
instagram 获取图片地址和视频地址先保持以后在详细说明 package mainimport ("bufio""encoding/json"&quo ...
获取图片地址并下载图片
#获取图片地址 import requests from lxml import etree a=requests.get('http://www.xiaohuar.com/hua/') #....g ...
new File()获取图片地址
new File()获取图片地址如下:new File(System.getProperty("user.dir") + "/src/main/resources/ima ...
input file详细介绍、更改css样式、获取图片地址、彻底清空上传文件（建议收藏）
文章目录博客内容介绍 input 全部类型 file 类型属性 accept属性 multiple属性事件监听 css样式更改上传图片文件,获取图片地址 input type file上传文 ...
vue从数据库获取图片地址，为什么图片地址为变量时找不到图片？
vue展示以变量地址的文件 vue新手刚开始学习vue的同学,可能会遇到一个问题,为什么当图片的地址为一个变量的时候,图片就找不到了呢? 接下来我就讲述一下我的解决方法,及思路. 首先,我们打开浏览 ...
vue中使用require动态获取图片地址
项目场景: 项目中根据图片不同的后缀名,展示不同的图片问题描述直接给图片的src绑定图片地址,图片不显示,使用 require('图片本地路径' + '地址变量' + '.png') 也不显示 & ...
解决oppo、vivo手机从相册选择图片获取图片地址问题
打开相册 if (position == 0) {//打开相册Intent intent = new Intent();intent.addCategory(Intent.CATEGORY_OPENA ...
php如何获取图片地址,js如何直接获取网页中图片地址
这次给大家带来js如何直接获取网页中图片地址,js直接获取网页中图片地址的注意事项有哪些,下面就是实战案例,一起来看一下. 第一种方法:js通过正则实现/** * 获取html代码中图片地址 * @p ...
怎么在html的img src=src的值这里调用js方法或变量获取图片地址
<html> <head>参考自 </head> <body> <img src="?" id="img" ...

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

正则表达式获取图片地址及超链接相关推荐

最新文章

热门文章