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

本文实例讲述了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>

PS：这里再为大家提供2款非常方便的正则表达式工具供大家参考使用：

JavaScript正则表达式在线测试工具：
http://tools.jb51.net/regex/javascript

正则表达式在线生成工具：
http://tools.jb51.net/regex/create_reg

希望本文所述对大家的javascript程序设计有所帮助。

赞 (0)

相关推荐

  • js实现正则匹配中文标点符号的方法

    js实现正则匹配中文标点符号的方法

    本文实例讲述了js正则匹配中文标点符号的方法.分享给大家供大家参考,具体如下: 运行效果截图如下: 具体代码如下: <html> <head> <meta http-equiv="content-type" content="text/html;charset=utf-8"> <title>js正则匹配中文标点符号</title> <head> <body> <input ty

  • js使用正则子表达式匹配首字母与尾字母相同单词的方法

    本文实例讲述了js使用正则子表达式匹配首字母与尾字母相同单词的方法.分享给大家供大家参考.具体实现方法如下: 复制代码 代码如下: <html> <head> <script type="text/javascript"> //子表达式实例:找到首字母与尾字母相同的单词 function t1(){  var con = document.getElementsByName('content')[0].value;  var reg = /\b(\w

  • String字符串匹配javascript 正则表达式

    在JavaScript代码中使用正则表达式进行模式匹配经常会用到String对象和RegExp对象的一些方法,例如replace.match.search等方法,下面所述是对相关方法使用的总结,需要的朋友参考下. String对象中支持正则表达式有4种方法,分别是:search.replace.match.split str.search(regexp) 定义:search()方法将在字符串str中检索与表达式regexp相匹配的字串,并且返回第一个匹配字串的第一个字符的位置.如果没有找到任何匹

  • js匹配网址url的正则表达式集合

    js匹配网址url的正则表达式集合

    DNS规定,域名中的标号都由英文字母和数字组成,每一个标号不超过63个字符,也不区分大小写字母.标号中除连字符(-)外不能使用其他的标点符号.级别最低的域名写在最左边,而级别最高的域名写在最右边.由多个标号组成的完整域名总共不超过255个字符.所以验证则网址url的正则可以如下几种 方法一: function checkUrl(urlString){ if(urlString!=""){ var reg=/(http|ftp|https):\/\/[\w\-_]+(\.[\w\-_]+

  • js正则表达式匹配数字字母下划线等

    1.一个正则表达式,只含有汉字.数字.字母.下划线不能以下划线开头和结尾: ^(?!_)(?!.*?_$)[a-zA-Z0-9_\u4e00-\u9fa5]+$ 其中: ^ 与字符串开始的地方匹配 (?!_) 不能以_开头 (?!.*?_$) 不能以_结尾 [a-zA-Z0-9_\u4e00-\u9fa5]+ 至少一个汉字.数字.字母.下划线 $ 与字符串结束的地方匹配 放在程序里前面加@,否则需要\\进行转义 @"^(?!_)(?!.*?_$)[a-zA-Z0-9_\u4e00-\u9fa5]

  • JS正则表达式匹配检测各种数值类型(数字验证)

    验证数字的正则表达式集 验证数字:^[0-9]*$ 验证n位的数字:^\d{n}$ 验证至少n位数字:^\d{n,}$ 验证m-n位的数字:^\d{m,n}$ 验证零和非零开头的数字:^(0|[1-9][0-9]*)$ 验证有两位小数的正实数:^[0-9]+(.[0-9]{2})?$ 验证有1-3位小数的正实数:^[0-9]+(.[0-9]{1,3})?$ 验证非零的正整数:^\+?[1-9][0-9]*$ 验证非零的负整数:^\-[1-9][0-9]*$ 验证非负整数(正整数 + 0) ^\d

  • javascript正则匹配汉字、数字、字母、下划线

    javascript正则检测只含有汉字.数字.字母.下划线不能以下划线开头和结尾 遇到一个用户名检测的的问题,查了一下,总结例子如下: 复制代码 代码如下: var reg = /^(?!_)(?!.*?_$)[a-zA-Z0-9_\u4e00-\u9fa5]+$/;if (!reg.test(实际取值的字符串)) {    alert('请输入5-24位字符:支持中文.英文.数字."_",推荐使用中文');}

  • JavaScript正则表达式匹配 div style标签

    测试字符串: <style>v\:* { BEHAVIOR: url(#default#VML) } o\:* { BEHAVIOR: url(#default#VML) } w\:* { BEHAVIOR: url(#default#VML) } .shape { BEHAVIOR: url(#default#VML) } </style> abcdefg <style> @font-face { font-family: Wingdings; } @font-fac

  • js 正则表达式学习笔记之匹配字符串

    js 正则表达式学习笔记之匹配字符串

    今天看了第5章几个例子,有点收获,记录下来当作回顾也当作分享. 关于匹配字符串问题,有很多种类型,今天讨论 js 代码里的字符串匹配.(因为我想学完之后写个语法高亮练手,所以用js代码当作例子) 复制代码 代码如下: var str1 = "我是字符串1哦,快把我取走", str2 = "我是字符串2哦,快把我取走"; 比如这样一个字符串,匹配起来很简单 /"[^"]*"/g 即可.   PS: 白色截图是 chrome 34 控制台中

  • JS正则子匹配实例分析

    本文实例讲述了JS正则子匹配.分享给大家供大家参考,具体如下: Javascript中,拆分字符串时可以使用string的的split或者substring.但是使用正则会更灵活和准确,这里是一个子匹配的例子,在页面过滤数据时很有用. var reg = /^\[(\d+)-(\d+)\]$/; var str = "[234-45]"; // now, I want the tow data if (reg.exec(str)) { document.write(RegExp.$1

  • js正则表达式之$1$2$3$4$5$6$7$8$9属性，返回子匹配的结果

    功能:$1-$9存放着正则表达式中最近的9个正则表达式的匹配结果,这些结果按照子匹配的出现顺序依次排列. 基本语法RegExp.$n 注意:这些属性是静态的,除了replace中的第二个参数可以省略RegExp之外,其他地方使用都要加上RegExp. 案例讲解:demo1 复制代码 代码如下: <html> <script language="javascript" type="text/javascript"> //创建要进行匹配的字符串

  • 解决js正则匹配换行问题实现代码

    复制代码 代码如下: <div id="main"> <div id="left"> </div> <div id="right"> php </div> </div> 如果DIV内没有内容则不换行 把上面的改为: 复制代码 代码如下: <div id="main"> <div id="left"></di

随机推荐