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 相关文章推荐
JS简单实现文件上传实例代码(无需插件)
Nov 15 Javascript
jquery中$.post()方法的简单实例
Feb 04 Javascript
Javascript限制网页只能在微信内置浏览器中访问
Nov 09 Javascript
jQuery+css3实现转动的正方形效果(附demo源码下载)
Jan 27 Javascript
jQuery UI Grid 模态框中的表格实例代码
Apr 01 jQuery
Node.js+jade抓取博客所有文章生成静态html文件的实例
Sep 19 Javascript
JS严格模式知识点总结
Feb 27 Javascript
使用Vue中 v-for循环列表控制按钮隐藏显示功能
Apr 23 Javascript
详解vue-property-decorator使用手册
Jul 29 Javascript
mpvue实现小程序签到金币掉落动画(api实现)
Oct 17 Javascript
React 父子组件通信的实现方法
Dec 05 Javascript
js Proxy的原理详解
May 25 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
mysql,mysqli,PDO的各自不同介绍
2012/09/19 PHP
php中使用Ajax时出现Error(c00ce56e)的详细解决方案
2014/11/03 PHP
php使用正则表达式去掉html中的注释方法
2016/11/03 PHP
thinkPHP批量删除的实现方法分析
2016/11/09 PHP
laravel框架模型、视图与控制器简单操作示例
2019/10/10 PHP
33种Javascript 表格排序控件收集
2009/12/03 Javascript
基于jquery的lazy loader插件实现图片的延迟加载[简单使用]
2011/05/07 Javascript
jQuery 源码分析笔记(3) Deferred机制
2011/06/19 Javascript
jquery-syntax动态语法着色示例代码
2014/05/14 Javascript
jQuery获取当前点击的对象元素(实现代码)
2016/05/19 Javascript
javascript操作cookie
2017/01/17 Javascript
jQuery查找和过滤_动力节点节点Java学院整理
2017/07/04 jQuery
vue音乐播放器插件vue-aplayer的配置及其使用实例详解
2017/07/10 Javascript
Node.js中的cluster模块深入解读
2018/06/11 Javascript
VUE 组件转换为微信小程序组件的方法
2019/11/06 Javascript
vue使用自定义事件的表单输入组件用法详解【日期组件与货币组件】
2020/06/01 Javascript
Jquery 获取相同NAME 或者id删除行操作
2020/08/24 jQuery
element-ui 弹窗组件封装的步骤
2021/01/22 Javascript
[02:10]DOTA2 TI10勇士令状玩法及不朽Ⅰ展示:焕新世界,如你所期
2020/05/29 DOTA
Python中的引用和拷贝浅析
2014/11/22 Python
Django中模型Model添加JSON类型字段的方法
2015/06/17 Python
python 多线程中子线程和主线程相互通信方法
2018/11/09 Python
对python过滤器和lambda函数的用法详解
2019/01/21 Python
NBA德国官方网上商店:NBA Store德国
2018/04/13 全球购物
DNA测试:Orig3n
2019/03/01 全球购物
日本最大的购物网站乐天市场国际版:Rakuten Global Market(支持中文)
2020/02/03 全球购物
MAC彩妆澳洲官网:M·A·C AU
2021/01/17 全球购物
Ruby如何实现动态方法调用
2012/11/18 面试题
超市采购员岗位职责
2014/02/01 职场文书
目标责任书范本
2014/04/16 职场文书
农村党员对照检查材料
2014/09/24 职场文书
干部作风建设年活动剖析材料
2014/10/23 职场文书
鸟的天堂导游词
2015/01/31 职场文书
2015军训通讯稿大全
2015/07/18 职场文书
MySQL数据库Innodb 引擎实现mvcc锁
2022/05/06 MySQL
mysql 体系结构和存储引擎介绍
2022/05/06 MySQL