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

Javascript piniu 1129浏览 0评论

获取所有 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>标签。

发表我的评论
取消评论
表情

Hi,您需要填写昵称和邮箱!

  • * 昵称:
  • * 邮箱: