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 相关文章推荐
图片上传插件jquery.uploadify详解
Nov 15 Javascript
简介JavaScript中toUpperCase()方法的使用
Jun 06 Javascript
JS实现自定义简单网页软键盘效果代码
Nov 05 Javascript
AngularJS入门教程之MVC架构实例分析
Nov 01 Javascript
Vue render深入开发讲解
Apr 13 Javascript
vue element动态渲染、移除表单并添加验证的实现
Jan 16 Javascript
快速了解Node中的Stream流是什么
Feb 13 Javascript
TypeScript开发Node.js程序的方法
Apr 30 Javascript
深入了解js原型模式
May 30 Javascript
vue.js实现备忘录demo
Jun 26 Javascript
jquery轻量级数字动画插件countUp.js使用详解
Oct 17 jQuery
解决angular 使用原生拖拽页面卡顿及表单控件输入延迟问题
Apr 21 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
php数组函数序列之array_unique() - 去除数组中重复的元素值
2011/10/29 PHP
无刷新动态加载数据 滚动条加载适合评论等页面
2013/10/16 PHP
php开启openssl的方法
2014/05/15 PHP
Session 失效的原因汇总及解决丢失办法
2015/09/30 PHP
浅谈socket同步和异步、阻塞和非阻塞、I/O模型
2016/12/15 PHP
PHP如何实现订单的延时处理详解
2017/12/30 PHP
插件:检测javascript的内存泄漏
2007/03/04 Javascript
自己整理的一个javascript日期处理函数
2010/10/16 Javascript
function foo的原型与prototype属性解惑
2010/11/19 Javascript
jquery实现盒子下拉效果示例代码
2013/09/12 Javascript
javascript实现信息的显示和隐藏如注册页面
2013/12/03 Javascript
JavaScript中的cacheStorage使用详解
2015/07/29 Javascript
基于jQuery下拉选择框插件支持单选多选功能代码
2016/06/07 Javascript
自动化测试读写64位操作系统的注册表
2016/08/15 Javascript
jQuery Validate 校验多个相同name的方法
2017/05/18 jQuery
react.js使用webpack搭配环境的入门教程
2017/08/14 Javascript
Vue.directive 自定义指令的问题小结
2018/03/04 Javascript
Node.js Event Loop各阶段讲解
2019/03/08 Javascript
vue+element tabs选项卡分页效果
2020/06/29 Javascript
Vue替代marquee标签超出宽度文字横向滚动效果
2019/12/09 Javascript
JS实现可以用键盘方向键控制的动画
2020/12/11 Javascript
python抓取京东价格分析京东商品价格走势
2014/01/09 Python
python爬虫框架talonspider简单介绍
2017/06/09 Python
深入理解Python3 内置函数大全
2017/11/23 Python
Python实现求解括号匹配问题的方法
2018/04/17 Python
Python字符串、整数、和浮点型数相互转换实例
2018/08/04 Python
python使用PIL和matplotlib获取图片像素点并合并解析
2019/09/10 Python
五年级数学教学反思
2014/02/11 职场文书
运动会演讲稿200字
2014/08/25 职场文书
教育系统干部作风整顿心得体会
2014/09/09 职场文书
党员四风自我剖析材料思想汇报
2014/09/13 职场文书
实现中国梦思想汇报2014
2014/09/13 职场文书
2014乡镇党政班子四风问题思想汇报
2014/09/14 职场文书
2015年纪念“卢沟桥事变”78周年活动方案
2015/05/06 职场文书
实现一个简单得数据响应系统
2021/11/11 Javascript
Spring Bean是如何初始化的详解
2022/03/22 Java/Android