13
2017
07

如何通过正则表达式获取img标签的src属性

1、部分正则语法介绍

\s    匹配任何空白字符,包括空格、制表符、换页符等等。等价于 [ \f\n\r\t\v]。

?    匹配前面的子表达式零次或一次,或指明一个非贪婪限定符。要匹配 ? 字符,请使用 \?。

|    指明两项之间的一个选择。要匹配 |,请使用 \|。

.     匹配除换行符 \n 之外的任何单字符。要匹配 . ,请使用 \. 。

g   全文搜索

i    忽略大小写

详情可参考 http://www.runoob.com/regexp/regexp-syntax.html

2、match 方法介绍

详情参考:http://www.w3school.com.cn/jsref/jsref_match.asp

3、使用正则表达式获取所有 img 标签

从图中可以看出,使用正则表达式  /<img\b.*?(?:\>|\/>)/gi  可以将字符串中的 img 标签进行匹配,并放到一个新数组中

关于  正则表达式  /<img\b.*?(?:\>|\/>)/gi 的解释


首先 标签的开始是 <  

其后紧跟着 img

故使用   /<img\b 进行匹配

.*?  则对字符串进行最小匹配(下一个匹配(?:\>|\/>)出现时,.* 就失效)

img 标签结尾 使用 > 或者 /> ,使用 (?:\>|\/>) 进行匹配

注:圆括号()会有一个副作用,是相关的匹配会被缓存,此时可用?:放在第一个选项前来消除这种副作用。

4、获取 img 标签对应的 src 属性



从图中可以看出,使用正则表达式 /\bsrc\b\s*=\s*[\'\"]?([^\'\"]*)[\'\"]?/i  可以将字符串中的 img 标签进行匹配,并放到一个新数组中,数组下标为1,就是所需要的src属性

关于  正则表达式  /\bsrc\b\s*=\s*[\'\"]?([^\'\"]*)[\'\"]?/i  的解释




\bsrc\b 是把src当成一个单词进行匹配

\s*=\s* 则是匹配 = 前后是否有空格(* 为0个以上,包括0)

[\'\"]?  进行最小匹配,src 一般用单引号或双引号包裹

([^\'\"]*)  匹配不上单引号和双引号的字符

注:这里没有使用 g 进行全局匹配,是因为 img 标签只有一个 src ,匹配到就可以结束了

5、总结

使用   /<img\b.*?(?:\>|\/>)/gi 对一个字符串进行全文匹配,获取所需要的 img 标签

使用   /\bsrc\b\s*=\s*[\'\"]?([^\'\"]*)[\'\"]?/i   对一个 img 标签进行匹配,获取所对应的 src 属性

注:因为个人书写手法的不一致,实际过程中坑你需要去除 \b \s 等一些特性限制,需根据实际需要进行修改

6、声明

本文为原创文章,chenyx.com.cn和作者拥有版权,如需转载,请注明来源于chenyx.com.cn并保留原文链接,否则视为侵权。


原文地址:http://chenyx.com.cn/?id=5


« 上一篇 下一篇 »

发表评论:

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。