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$ .post 高度封装（XMLHttpRequest对象）
注意： $.get在ie浏览器上会有缓存问题，一般用$ .post

从低到高，封装越来越高
XMLHTTPRequest –> $.ajax --->$ .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获取网址源码，返回字符串，之后进行正则匹配
从而得出抓取图片的数量

RegExp抓取图片

RegExp抓取图片

猜你喜欢