获取所有 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 ,匹配到就可以结束了
例子:
var test="<img src="aaa/111.jpg"/><img src="aaa/112.jpg"/><img src="aaa/113.jpg"/>"; var pattern=/<img [^>]*\/>/ig; 这样也可以实现惰性模式,[^>]这个表示的就是在<img到/>之间不能出现>,所以结果可以找寻每个<img>标签。