how to get url content from style="background-image:url by web scraper

 

使用 web scraper 对某个移动应用进行爬虫，

 

使用了其多种 selector发现无法正确爬取以下 html 段落的 url image 数据：

 

 

<div class="evaluateInfo" name="">

<div class="evaluatePic bigLunbo  onlyOne ">

<div class="img" style="background-image:url(//pic2.58cdn.com.cn/zhuanzh/big/n_v2cae33b89b247d027a728.jpg)">

</div>

</div>

</div>

 

 

 selector 无法选择 image 内容（image 隐藏没有显示出来），于是只能通过 css selector 或者 html 尝试。 

 

在设置 Type = html 时，selector 只能通过设置 “.evaluateInfo>div” 或者 “.evaluatePic.bigLunbo.onlyOne” 获取最接近的结果：

 

 

<div class="img" style="background-image:url(//pic2.58cdn.com.cn/zhuanzh/big/n_v2cae33b86dd9549f7a749b247d027a728.jpg)"></div>

 

 

现在只能想办法将这一段字符串进行转化，还好 web scraper 内置了regex 正则表达式。

 

如何只获取 url 中有用的部分呢？

 

使用正则表达式  \/\/([^\s]+)*\jpg  或  (?://[^&]+)*\jpg 或  //.+.*(jpg|png|gif|jpeg|mp4) ，解释如下（此处只解释前面）：

 

 1. \/：必须跟小括号的右半部分，\ 是对 ( 进行转义

 2. \/：同 1，完整解释是必须以 // 开头
 3. ([^\s]+)：第2步之后需要跟至少一个非空白字符，这里匹配的即为背景图的完整地址，综合考虑到背景图地址可以是绝对地址和相对地址，以及实际场景（即背景图地址可以被单引号、双引号或 " 引起来，如"http://domain.com/a.jpg"，但不会出现一端是单引号或双引号，另一端不是单引号或双引号的情况，如 'http://domain.com/a.jpg" 或 "http://domain.com/a.jpg"），因此这里认为可以包含任意非空白字符
 4. *\jpg：第3步之后匹配后面的 jpg 字符串 0次或多次

 

 最终获取想要的结果：

 

 

//pic2.58cdn.com.cn/zhuanzh/big/n_v2cae33b86dd9549f7a749b247d027a728.jpg

 

 

为使得表达式兼容各种格式，需修改为  \/\/([^\s]+)*(jpg|png|gif|jpeg|mp4)  或  (?://[^&]+)*(jpg|png|gif|jpeg|mp4)  或  //.+.*(jpg|png|gif|jpeg|mp4) 。

 

 web scraper 官方说大概方向是用 selector attribute, 没有具体方式，后期会支持 background-image selector，但是多年过去了，最新版本也只有 image selector。

 

此处方式可以得到想要的结果。