前端关于node.js简单爬虫问题

突然想试一试自己项目中能否加入类似页面数据提取的功能

不会别的，目前也没时间研究

网上翻了翻node.js爬虫的写法，说一下自己的实现思路

需求比较简单，输入网址，能把页面中所有图片获取出来就行

　1.打开控制台，观察发现其实大多数图片都是公网可访问，再有无非是img标签中有相对地址的存在

　2.那我们第一步就很明白了，获取输入网址的html

　　实现思路：1.直接请求输入的网址是不太可能的，涉及到跨域问题，所以迂回下利用express建立本地服务，访问输入的地址

//express 接口返回数据 不做任何处理只将请求到的htm返回<br><br>var express = require('express');
var router = express.Router();
const superagent = require('superagent')
 
router.get('/', function (req, res, next) {
    url = req.query.url
    superagent.get(url)
    .buffer(true)
    .set({
        'Referer':'',
    })
    .end(( err,resSelf)=>{
        if(err){
            res.send(err)
        }else{
            res.send({
                data:resSelf.text
            })
        }
 
    })
});
 
module.exports = router;

　　　　　　　2.获取整个html

const handleIframe = ()=>{
    superagent.get("http://localhost:10000/test")
    .query({url:test.value})
    .end(( err:any,res:any)=>{
        let htmlString =htmlEncode(res.body.data) 
        let arr =  htmlString.match(reg)
        imgArr.value = arr.map((item:any)=>{
             return {
                 url:item,
                 show:true
             }
         })
    })
}

　　　　　　　3.提取文本中的http或需要的内容

1	`const reg= /(https?\|http\|ftp\|file):\/\/[-A-Za-z0-9+&@#/%?=~_\|!:,.;]+[-A-Za-z0-9+&@#/%=~_\|]/g;`

　　　　　　　4.放到自己页面中的img标签中，处理不是图片的数据

<template>
    <div class="viewBoxCss">
        <button @click="handleTest">测试</button>
        <button @click="handleTestbj">编辑</button>
        <a-input v-model:value="test" />
        <button @click="handleIframe">发送</button>
        <button @click="handleIframeClose">关闭</button>
        <!-- <iframe v-if="iframeShow" src="https://www.bbctop.com/"></iframe> -->
        <!-- <a href="https://www.bbctop.com/" target="value"></a> -->
    </div>
    <div  style="display:flex;flex-wrap: wrap;">
        <div  v-for="(item,index) of imgArr" :key="index"> 
            <!-- {{index}} -->
            <img 
                @error="imageLoad(index)"
                :src="item.url"
                v-if="item.show"
                max-width: 200px;
            >
        </div>
    </div>
</template>