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的Select选择框的华丽变身
Aug 23 Javascript
Javascript 数组排序详解
Oct 22 Javascript
JS实现的车标图片提示效果代码
Oct 10 Javascript
实例代码详解javascript实现窗口抖动及qq窗口抖动
Jan 04 Javascript
jQuery图片旋转插件jQueryRotate.js用法实例(附demo下载)
Jan 21 Javascript
原生JS实现网络彩票投注效果
Sep 25 Javascript
jQuery EasyUI 右键菜单--关闭标签/选项卡的简单实例
Oct 10 Javascript
input输入框内容实时监测(附代码)
Aug 15 Javascript
vue.js在标签属性中插入变量参数的方法
Mar 06 Javascript
JavaScript实现简单随机点名器
Nov 21 Javascript
ant-design-vue 快速避坑指南(推荐)
Jan 21 Javascript
详解Vue的mixin策略
Nov 19 Vue.js
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实现事件机制的方法
2015/07/10 PHP
Yii2增加验证码步骤详解
2016/04/25 PHP
Laravel关系模型指定条件查询方法
2019/10/10 PHP
JavaScript 图像动画的小demo
2012/05/23 Javascript
基于jquery实现点击左右按钮图片横向滚动
2013/04/11 Javascript
jquery下拉select控件操作方法分享(jquery操作select)
2014/03/25 Javascript
js生成的验证码的实现与技术分析
2014/09/17 Javascript
JavaScript中的ArrayBuffer详细介绍
2014/12/08 Javascript
JS中sort函数排序用法实例分析
2016/06/16 Javascript
基于JavaScript实现随机颜色输入框
2016/12/10 Javascript
详谈js中window.location.search的用法和作用
2017/02/13 Javascript
浅谈angular4 ng-content 中隐藏的内容
2017/08/18 Javascript
vue父子组件的嵌套的示例代码
2017/09/08 Javascript
Vue的事件响应式进度条组件实例详解
2018/02/04 Javascript
JS改变页面颜色源码分享
2018/02/24 Javascript
JavaScript仿京东秒杀倒计时
2020/03/17 Javascript
Vue左滑组件slider使用详解
2020/08/21 Javascript
vue v-on:click传递动态参数的步骤
2020/09/11 Javascript
如何在vue 中引入使用jquery
2020/11/10 jQuery
vue+iview分页组件的封装
2020/11/17 Vue.js
vue绑定class的三种方法
2020/12/24 Vue.js
python 写入csv乱码问题解决方法
2016/10/23 Python
python使用super()出现错误解决办法
2017/08/14 Python
Python数据可视化正态分布简单分析及实现代码
2017/12/04 Python
详解Python列表赋值复制深拷贝及5种浅拷贝
2019/05/15 Python
pyqt5对用qt designer设计的窗体实现弹出子窗口的示例
2019/06/19 Python
这可能是最好玩的python GUI入门实例(推荐)
2019/07/19 Python
通过实例解析Python文件操作实现步骤
2020/09/21 Python
Under Armour安德玛荷兰官网:美国高端运动科技品牌
2019/07/10 全球购物
楼面经理岗位职责范本
2014/02/18 职场文书
超市国庆节促销方案
2014/02/20 职场文书
穷人该怎么创业?谨记以下几点
2019/07/11 职场文书
python绘制箱型图
2021/04/27 Python
手残删除python之后的补救方法
2021/06/26 Python
MySQL实战记录之如何快速定位慢SQL
2022/03/23 MySQL
vue3 自定义图片放大器效果的示例代码
2022/07/23 Vue.js