js爬取网页文字图片 html爬取网页信息

最新推荐文章于 2024-07-31 16:08:35 发布

征途黯然.

最新推荐文章于 2024-07-31 16:08:35 发布

阅读量8k

点赞数 5

文章标签： js爬取图片 js爬取文字爬取图片 html爬取

原创博客归本人所有，禁止任何人、组织、公司转载或采集！

本文链接：https://blog.csdn.net/qq_43592352/article/details/90647787

版权

js爬取网页文字图片 html爬取网页信息

博主的话

	可以爬取许多图片网站上的图片（一些很完善的网站不可以）。声明：本网页代码仅供朋友们学习使用，一
切商用等事项大家一定注意，而且我们身为开发者更应有版权意识。

功能简述

	我是在网页上用js写的，因为一些原因只可以用IE浏览器运行。
	主要功能是：输入一串网站地址到input框，点击检索。会自动爬取本网页页面里面的图片并且显示出图片
的长和宽。此外，也会对网页里面的文字进行粗略的提取。

运行效果

1’ 将爬取此页面的图片
在这里插入图片描述
2’ 粘贴网址，点击查找图片即可

项目代码

有言在先，只提供 JS爬虫.html 部分的代码。css部分不提供了。css很简单，大家可以对照html部分根据自己的爱好设置。锻炼前端能力。
如果大家真的是急用，下载地址：https://download.csdn.net/download/qq_43592352/12368535
。
此为项目文件。
在这里插入图片描述

<html>
<head>
    <title>JS爬虫</title>
    <link rel="stylesheet" type="text/css" href="css/style.css"/>
    <script src="jquery-3.3.1.js" type="text/javascript"></script>
</head>
<body>
    <div id="container"></div>
        <div id="input_area">
            <span style="color: white;font-size:20px">输入网址：
            </span><input type="text" id="url">
            <input type="button" id="check" onclick="getSource()" value="提取文字">
            <input type="button" id="check" value="查找图片" onclick="check_img()">
        <textarea rows="30" cols="100" id="source"></textarea>
    </div>

    <div id="pic_container">
        <div id="picCon_1" class="picConClass">
        </div>
        <div id="picCon_2" class="picConClass"></div>
        <div id="picCon_3" class="picConClass"></div>
        <div id="picCon_4" class="picConClass"></div>
    </div>
    
        
        
    
</body>
<script type="text/javascript">
//用于创建XMLHttpRequest对象
function createXmlHttp() {
    //根据window.XMLHttpRequest对象是否存在使用不同的创建方式
    if (window.XMLHttpRequest) {
       xmlHttp = new XMLHttpRequest();                  //FireFox、Opera等浏览器支持的创建方式
    } else {
       xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");//IE浏览器支持的创建方式
    }
}

//直接通过XMLHttpRequest对象获取远程网页源代码
function getSource() {
    var url = document.getElementById("url").value;             //获取目标地址信息
    //地址为空时提示用户输入
    if (url == "") {
        alert("请输入网页地址。");
        return;
    }

    document.getElementById("source").value = "正在加载……";   //提示正在加载
    createXmlHttp();                                            //创建XMLHttpRequest对象
    xmlHttp.onreadystatechange = writeSource;                   //设置回调函数
    xmlHttp.open("GET", url, true);
    xmlHttp.send(null);
}

//将远程网页源代码写入页面文字区域
function writeSource() {
    if (xmlHttp.readyState == 4) {
        document.getElementById("source").value = xmlHttp.responseText;
    }
}

function backposi(str,num){
    var n=0;
    for(var i=str.length;i>=0;i--)
        if(str.charAt(i)=='/')
            {
                n++;
                if(n==num) return i;
            }
    
}

    var keyUrl=new Array();
    function check_img(){//匹配出img字符串
        var url = document.getElementById("url").value; 
        var key=xmlHttp.responseText;
        keyUrl=key.match(/<img src=(.*?)>/g);
        //第一次匹配出src后的字符
        for(var i=0;i<keyUrl.length;i++){
            var n=keyUrl[i].length;
            var key=keyUrl[i];
            var posi1=0,posi2=0;
            for(var j=0;j<n;j++){
                if(key.charAt(j)=='\"'&&posi1==0) {posi1=j;continue;}
                if(key.charAt(j)=='\"'&&posi2==0) {posi2=j;break;}
            }
            keyUrl[i]=keyUrl[i].substring(posi1+1,posi2);
        }
        //第二次对url的相对路径、绝对路径匹配
        for(var i=0;i<keyUrl.length;i++){
            var num1=(keyUrl[i].substring(0,3).split('/')).length-1;
            var num2=(url.split('/')).length-1;
            if(num1==num2) {keyUrl[i]=keyUrl[i].substring(2,keyUrl[i].length);}
            else {
                if(num1==1){keyUrl[i]=url.substring(0,backposi(url,2))+keyUrl[i].substring(0,keyUrl[i].length);}
            }
        }
        increase_img();check_text();
    }

    var imgflag=0;
    function increase_img(){
        var div=$("<div class='pic'></div>");
        var text=$("<text></text>");
        var img=document.createElement("img");
        img.src=keyUrl[imgflag];
        var x,y;
        img.onload = function(){
            x=img.width;y=this.height;
            text.append(x+"*"+y+"px");
            
            if(x>360){
                    img.height=y/x*360;
                    img.width=360;
                }
            }
        if(imgflag%4==0)
            {
                $("#picCon_1").append(div);
                div.append(img);div.append('</br>');
                div.append(text);
            }
        else if(imgflag%4==1)
            {
                $("#picCon_2").append(div);
                div.append(img);div.append('</br>');
                div.append(text);
            }
        else if(imgflag%4==2)
            {
                $("#picCon_3").append(div);
                div.append(img);div.append('</br>');
                div.append(text);
            }
        else if(imgflag%4==3)
            {
                $("#picCon_4").append(div);
                div.append(img);div.append('</br>');
                div.append(text);
            }
        imgflag++;
        if(imgflag-1<keyUrl.length)
            setTimeout("increase_img()",200);
        else
            imgflag=0;
    }

function check_text(){
    var key=xmlHttp.responseText.match(/>(.*?)</g);
    for(var i=0;i<key.length;i++){
        if(key[i].length==3) key.splice(i,1);
        else {
            key[i]=key[i].substring(1,key[i].length-1);
        }
    }
    document.getElementById("source").value =key;
}

</script>
</html>

代码简述

首先，根据输入的网站Url来获取该网址的源代码，储存在xmlHttp.responseText中；

其次，通过用正则表达式将形如< img />的字符串全部提取，然后再定义函数提取出img标签中src的值。这时，src的值有的是绝对定位：http://www.xxx.com/xxx.png, 而有的是相对定位：//img/xxx.png。所以此时要对相对定位的字符增加http：//xxx.xxx.com头。

然后，再创建img标签，把这些图片放到网页中。

最后，用css小小的美化一下，一个简单的爬取工具就完成啦。大家有疑惑的可以问我哦。

2019-5-28