html页面有个点击按钮和输入框,在输入框中输入网页地址,点击按钮,直接使用JavaScript来爬取该网页的所有图片
时间: 2023-12-04 15:03:15 浏览: 28
可以使用JavaScript中的XMLHttpRequest对象来获取该网页的HTML源代码,然后使用正则表达式来匹配出所有图片的URL,最后将这些URL保存下来或者直接展示在页面上。以下是一个简单的示例代码:
```html
<!DOCTYPE html>
<html>
<head>
<title>爬取网页图片</title>
<script type="text/javascript">
function getCrawlResult() {
var url = document.getElementById("url").value; // 获取输入框中的网页地址
var xhr = new XMLHttpRequest(); // 创建XMLHttpRequest对象
xhr.open("GET", url, true); // 发送请求
xhr.onreadystatechange = function() {
if (xhr.readyState == 4 && xhr.status == 200) {
var html = xhr.responseText; // 获取HTML源代码
var imgReg = /<img.*?src="(.*?)"/g; // 匹配所有图片的URL
var imgUrls = [];
var result;
while (result = imgReg.exec(html)) {
imgUrls.push(result[1]); // 将匹配到的URL保存下来
}
var resultArea = document.getElementById("result");
resultArea.innerHTML = ""; // 清空结果区域
for (var i = 0; i < imgUrls.length; i++) {
var img = document.createElement("img"); // 创建img标签
img.src = imgUrls[i]; // 设置图片的URL
resultArea.appendChild(img); // 添加到结果区域
}
}
}
xhr.send();
}
</script>
</head>
<body>
<div>
<label for="url">网页地址:</label>
<input type="text" id="url">
<button onclick="getCrawlResult()">爬取图片</button>
</div>
<div id="result"></div>
</body>
</html>
```
在这个示例中,我们通过正则表达式来匹配所有的图片URL,并将结果保存在一个数组中,最后通过JavaScript动态创建img标签来展示这些图片。注意,这种方式只能爬取同源网站的图片,如果要爬取其他网站的图片,需要使用跨域请求和其他技术手段。