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中JSON.parse的影响概述
Jul 17 Javascript
浏览器的JavaScript引擎的识别方法
Oct 20 Javascript
JavaScript截取字符串的Slice、Substring、Substr函数详解和比较
Mar 20 Javascript
jQuery获取浏览器类型和版本号的方法
Jul 05 Javascript
微信小程序 rpx 尺寸单位详细介绍
Oct 13 Javascript
canvas实现图像布局填充功能
Feb 06 Javascript
使用jQuery实现一个类似GridView的编辑,更新,取消和删除的功能
Mar 15 Javascript
vue 中filter的多种用法
Apr 26 Javascript
JavaScript中常见内置函数用法示例
May 14 Javascript
微信小程序仿朋友圈发布动态功能
Jul 15 Javascript
koa源码中promise的解读
Nov 13 Javascript
vue-video-player视频播放器使用配置详解
Oct 23 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 服务器配置(使用Apache及IIS两种方法)
2009/06/01 PHP
Zend Studio去除编辑器的语法警告设置方法
2012/10/24 PHP
php存储过程调用实例代码
2013/02/03 PHP
php处理json格式数据经典案例总结
2016/05/19 PHP
php单链表实现代码分享
2016/07/04 PHP
对php 判断http还是https,以及获得当前url的方法详解
2019/01/15 PHP
PHP PDOStatement::debugDumpParams讲解
2019/01/30 PHP
php中目录操作opendir()、readdir()及scandir()用法示例
2019/06/08 PHP
javascript编程起步(第七课)
2007/01/10 Javascript
jQuery的each终止或跳过示例代码
2013/12/12 Javascript
jQuery实现简单网页遮罩层/弹出层效果兼容IE6、IE7
2014/06/16 Javascript
js获取字符串字节数方法小结
2015/06/09 Javascript
javascript检查浏览器是否已经启用XX功能
2015/07/10 Javascript
iframe跨域通信封装详解
2015/08/11 Javascript
谈谈我对JavaScript原型和闭包系列理解(随手笔记9)
2015/12/24 Javascript
jQuery插件HighCharts绘制简单2D折线图效果示例【附demo源码】
2017/03/21 jQuery
Vue2.0表单校验组件vee-validate的使用详解
2017/05/02 Javascript
bootstrap table服务端实现分页效果
2017/08/10 Javascript
js 根据对象数组中的属性进行排序实现代码
2019/09/12 Javascript
Javascript Worker子线程代码实例
2020/02/20 Javascript
[55:03]完美世界DOTA2联赛PWL S2 LBZS vs FTD.C 第二场 11.20
2020/11/20 DOTA
Python写的PHPMyAdmin暴力破解工具代码
2014/08/06 Python
python简单实现计算过期时间的方法
2015/06/09 Python
使用python实现ANN
2017/12/20 Python
python 2.7 检测一个网页是否能正常访问的方法
2018/12/26 Python
详解Django模版中加载静态文件配置方法
2019/07/21 Python
python获取栅格点和面值的实现
2020/03/10 Python
如何用canvas实现在线签名的示例代码
2018/07/10 HTML / CSS
极度干燥澳大利亚官方网站:Superdry澳大利亚
2019/03/28 全球购物
客服端调用EJB对象的几个基本步骤
2012/01/15 面试题
Boolean b = new Boolean(“abcde”); 会编译错误码
2013/11/27 面试题
2014年办公室主任工作总结
2014/11/12 职场文书
2016年教师节慰问信
2015/12/01 职场文书
四则混合运算教学反思
2016/02/23 职场文书
Go语言测试库testify使用学习
2022/07/23 Golang
MySQL count(*)统计总数问题汇总
2022/09/23 MySQL