RegExp抓取图片
几种显示图片的方式:
html语法不严格
<ul>
<li><img src='img.png' /></li>
<li><img alt='prompt' src="img.png" class='cla' ></li>
<li><IMG alt='prompt' Src=img.png></li>
<li>
图片1:<img src='img.png' />图片2:<img alt='prompt' src="img.png" class='cla' >
图片3:<IMG alt='prompt' Src=img.png>
</li>
</ul>
img = "图片3:<IMG alt='prompt' Src=img.png>....";
console.info(img.match(/<img.+src=["']?.+["']?.*[\/]?>/i));//i代表不区分大小写
1.在书写正则表达式时,应该先把正确的格式罗列,通过正确的格式来编写表达式
2.如果特殊的情况比较多,则考虑将整体分为多个部分来解决
匹配第一个
var img= "图片1:<img src='img.png' />....";
console.info(img.match(/<img\ssrc='.+'.+\/>/));//注意\s代表空格
img = "图片2:<img alt='prompt' src=\"img.png\" class='cla' >....";// \为转义符
console.info(img.match(/<img.+src=["'].+["'].+[\/]?>/));
img = "图片3:<IMG alt='prompt' Src=img.png>....";
console.info(img.match(/<img.+src=["']?.+["']?.*[\/]?>/i));//i代表不区分大小写
全局
// 在页面中通常会有多张图例如:
img = "图片1:<img src='img.png' />图片2:<img alt='prompt' src=\"img.png\" class='cla' >图片3:<IMG alt='prompt' Src=img.png>";
console.info(img.match(/<img.+?src=["']?.+?["']?.*?[\/]?>/gi));
匹配全部字符串
/ 默认在匹配的过程中是贪婪模式. 在匹配多个对象时,一般来说修改成懒惰,即上述正则表达式
可以在修饰数量的匹配符(* + )后面添加? 则代表懒惰和代表0-1 和0-max的不一样
console.info(img.match(/<img.+?src=["']?.+?["']?.*?[\/]?>/gi));
- 抓取图片正则表达式利用
引入jquery
如何获取源码
jquery中有
.get . g e t .post 高度封装 (XMLHttpRequest对象)
注意: .get在ie浏览器上会有缓存问题,一般用 . g e t 在 i e 浏 览 器 上 会 有 缓 存 问 题 , 一 般 用 .post
从低到高 ,封装越来越高
XMLHTTPRequest –>
.ajax−−−>
.
a
j
a
x
−
−
−
>
.get $.post
$.ajax :读取特殊数据(xml,做特殊配置)
$.ajax({
url:'http://www.baidu.com',
dataType:'html',//帮助我们设置返回数据
success: function(data){
alert(data);
}
});
发现控制台会报错
此处涉及到跨域问题
默认情况jquery发送的请求只能访问同域下资源(不支持跨域问题的)
不支持跨域(考虑到安全性问题)
在java中解决方案: ajax请求提交到自己的后台 然后通过:HTTPClient发送请求即可
假设以获得源码data.txt
解决跨域问题 本地数据和请求页面在一个Web工程下边
$.ajax({
url:'data.txt',
dataType:'text',
success: function(data){
var srcs=data.match(/<img.+?src=["']?.+?["']?.*?[\/]?>/gi);
console.info("匹配的数量为:" + srcs.length);
console.info(srcs);
}
});
匹配成功
优化,可以提示客户输入网址,之后通过后台httpclient获取网址源码,返回字符串,之后进行正则匹配
从而得出抓取图片的数量