js爬取网页文字图片 html爬取网页信息
- 博主的话
- 功能简述
- 运行效果
- 项目代码
- 代码简述
博主的话
可以爬取许多图片网站上的图片（一些很完善的网站不可以）。声明：本网页代码仅供朋友们学习使用，一
切商用等事项大家一定注意，而且我们身为开发者更应有版权意识。
功能简述
我是在网页上用js写的，因为一些原因只可以用IE浏览器运行。
主要功能是：输入一串网站地址到input框，点击检索。会自动爬取本网页页面里面的图片并且显示出图片
的长和宽。此外，也会对网页里面的文字进行粗略的提取。
运行效果
1’ 将爬取此页面的图片
2’ 粘贴网址，点击查找图片即可
项目代码
有言在先，只提供 JS爬虫.html 部分的代码。css部分不提供了。css很简单，大家可以对照html部分根据自己的爱好设置。锻炼前端能力。
此为项目文件。
<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小小的美化一下，一个简单的爬取工具就完成啦。大家有疑惑的可以问我哦。