一、部分正则语法介绍html
\s 匹配任何空白字符,包括空格、制表符、换页符等等。等价于 [ \f\n\r\t\v]。正则表达式
? 匹配前面的子表达式零次或一次,或指明一个非贪婪限定符。要匹配 ? 字符,请使用 \?。数组
| 指明两项之间的一个选择。要匹配 |,请使用 \|。缓存
. 匹配除换行符 \n 以外的任何单字符。要匹配 . ,请使用 \. 。post
g 全文搜索regexp
i 忽略大小写htm
详情可参考 http://www.runoob.com/regexp/regexp-syntax.htmlblog
二、match 方法介绍字符串
详情参考:http://www.w3school.com.cn/jsref/jsref_match.aspget
三、使用正则表达式获取全部 img 标签
从图中能够看出,使用正则表达式 /<img\b.*?(?:\>|\/>)/gi 能够将字符串中的 img 标签进行匹配,并放到一个新数组中
关于 正则表达式 /<img\b.*?(?:\>|\/>)/gi 的解释
首先 标签的开始是 <
其后紧跟着 img
故使用 /<img\b 进行匹配
.*? 则对字符串进行最小匹配(下一个匹配(?:\>|\/>)出现时,.* 就失效)
img 标签结尾 使用 > 或者 /> ,使用 (?:\>|\/>) 进行匹配
注:圆括号()会有一个反作用,是相关的匹配会被缓存,此时可用?:放在第一个选项前来消除这种反作用。
四、获取 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 ,匹配到就能够结束了
五、总结
使用 /<img\b.*?(?:\>|\/>)/gi 对一个字符串进行全文匹配,获取所须要的 img 标签
使用 /\bsrc\b\s*=\s*[\'\"]?([^\'\"]*)[\'\"]?/i 对一个 img 标签进行匹配,获取所对应的 src 属性
注:由于我的书写手法的不一致,实际过程当中坑你须要去除 \b \s 等一些特性限制,需根据实际须要进行修改
原文地址:http://www.cnblogs.com/ImCehnyx/p/7163691.html