JavaScript 正则表达式( 匹配网页的图片地址)

正则表达式 - 元字符

贪婪模式与非贪婪模式

贪婪与非贪婪模式影响的是被量词修饰的子表达式的匹配行为;
贪婪模式 在整个表达式匹配成功的前提下，尽可能多的匹配;
非贪婪模式 在整个表达式匹配成功的前提下，尽可能少的匹配。非贪婪模式只被部分NFA引擎所支持。

贪婪与非贪婪模式详解

匹配所有img标签

对于一个img标签来说一般也就是如下的写法

<img ... src=''..." ...>
<img ... src=''..." ... />
<img ... src=''..." .. ></img>

为了处理大部分的写法我们写下如下的正则来匹配带有src属性的部分

document.body.innerHTML.match(/<img.*?(\/?>)/g)

这个时候匹配到的就是如下的内容

匹配所有img标签

因为我们需要的只有src属性的值，所以要用到正则的 非获取匹配 和 反向肯定预查询

document.body.innerHTML.match(/(?<=<img[^<]+\ssrc=("|'|&quot;)).*?(?=("|'|&quot;).*?\/?>)/g)
// \ssrc 防止data-src

匹配所有背景图

document.body.innerHTML.match(/(?<=(background|border)(-image)?:\s*url\(('|"|&quot;)).*?(?=('|"|&quot;)\))/g)

匹配所有背景图

所有图片地址

document.body.innerHTML.match(/(?<=<img[^<]+\ssrc=("|'|&quot;)).*?(?=("|'|&quot;).*?\/?>)|(?<=(background|border)(-image)?:\s*url\(('|"|&quot;)).*?(?=('|"|&quot;)\))/g)

所有图片地址