js正则匹配出所有图片及图片地址src的方法


Posted in Javascript onJune 08, 2015

本文实例讲述了js正则匹配出所有图片及图片地址src的方法。分享给大家供大家参考。具体分析如下:

有很多时候我们需要用到文章里面的图片,而且主要是用到它的图片地址,这个时候我们需要通过正则匹配出图片标签,然后做到我们需要的数据

平时也没怎么用正则,一不学就忘,最近项目需要,然后又去goole了,好乱!一搜一大堆,也不是我想要的,最后把自己留一个已被后用:

实现:通过js正则匹配出所有图片及所有图片地址src。

思路:1.匹配出图片img标签(即匹配出所有图片),过滤其他不需要的字符

从匹配出来的结果(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 相关文章推荐
javascript 操作文件 实现方法小结
Jul 02 Javascript
基于jquery的分页控件(C#)
Jan 06 Javascript
js插件方式打开pdf文件(浏览器pdf插件分享)
Dec 20 Javascript
jQuery实现非常实用漂亮的select下拉菜单选择效果
Nov 06 Javascript
浅谈javascript中replace()方法
Nov 10 Javascript
如何学JavaScript?前辈的经验之谈
Dec 28 Javascript
JS实现去除数组中重复json的方法示例
Dec 21 Javascript
Vue2.0实现调用摄像头进行拍照功能 exif.js实现图片上传功能
Apr 28 Javascript
详解react-refetch的使用小例子
Feb 15 Javascript
微信二次分享报错invalid signature问题及解决方法
Apr 01 Javascript
深入理解JS异步编程-Promise
Jun 03 Javascript
JS 设计模式之:单例模式定义与实现方法浅析
May 06 Javascript
Js数组排序函数sort()介绍
Jun 08 #Javascript
元素绑定click点击事件方法
Jun 08 #Javascript
JavaScript获取URL汇总
Jun 08 #Javascript
详解JavaScript中的forEach()方法的使用
Jun 08 #Javascript
详解JavaScript中的every()方法
Jun 08 #Javascript
JavaSciprt中处理字符串之sup()方法的使用教程
Jun 08 #Javascript
javaScript中with函数用法实例分析
Jun 08 #Javascript
You might like
动态生成gif格式的图像要注意?
2006/10/09 PHP
PHP中的array数组类型分析说明
2010/07/27 PHP
国产PHP开发框架myqee新手快速入门教程
2014/07/14 PHP
thinkPHP5框架自定义验证器实现方法分析
2018/06/11 PHP
php判断/计算闰年的方法小结【三种方法】
2019/07/06 PHP
ext实现完整的登录代码
2008/08/08 Javascript
javascript判断机器是否联网的2种方法
2013/08/09 Javascript
由点击页面其它地方隐藏div所想到的jQuery的delegate
2013/08/29 Javascript
JavaScript DOM元素尺寸和位置
2015/04/13 Javascript
DWR中各种java方法的调用
2016/05/04 Javascript
Jquery遍历select option和添加移除option的实现方法
2016/08/26 Javascript
jQuery EasyUI编辑DataGrid用combobox实现多级联动
2016/08/29 Javascript
vue解决使用webpack打包后keep-alive不生效的方法
2018/09/01 Javascript
vue-cli3项目展示本地Markdown文件的方法
2019/06/07 Javascript
快速解决element的autofocus失效问题
2020/09/08 Javascript
vue pages 多入口项目 + chainWebpack 全局引用缩写说明
2020/09/21 Javascript
前端vue如何使用高德地图
2020/11/05 Javascript
用Python实现一个简单的能够上传下载的HTTP服务器
2015/05/05 Python
Linux CentOS7下安装python3 的方法
2018/01/21 Python
python中利用h5py模块读取h5文件中的主键方法
2018/06/05 Python
eclipse创建python项目步骤详解
2019/05/10 Python
Python代码使用 Pyftpdlib实现FTP服务器功能
2019/07/22 Python
python利用opencv实现SIFT特征提取与匹配
2020/03/05 Python
解决pycharm中的run和debug失效无法点击运行
2020/06/09 Python
matplotlib 多个图像共用一个colorbar的实现示例
2020/09/10 Python
Python pip 常用命令汇总
2020/10/19 Python
一款利用html5和css3实现的3D滚动特效的教程
2015/01/04 HTML / CSS
生物有机护肤品:Aurelia Probiotic Skincare
2018/01/31 全球购物
某公司面试题
2012/03/05 面试题
政法大学毕业生自荐信范文
2014/01/01 职场文书
回门宴新郎答谢词
2014/01/12 职场文书
《山谷中的谜底》教学反思
2014/04/26 职场文书
办公用房租赁协议书
2014/11/29 职场文书
质量保证书
2015/01/17 职场文书
2015年社区卫生工作总结
2015/04/21 职场文书
给学校的建议书400字
2015/09/14 职场文书