乐趣区

关于前端:Nodejs操作Dom-轻松hold住简单爬虫

前言

前段时间,我发现一个开源题库,题目十分有意思。我想把它整成一个 JSON 文件做为数据储备,不便整活。

一共有一百五十多道题目,手动 CV 我必定是不想干的。于是写了个脚本,在写脚本的过程中,我发现一个能让 Node.js 操作 Dom 的开源我的项目。

有了它,再加上 jQuery 就能够应答简略爬虫抓取数据了,所以写下这篇文章跟大家分享下。

源码仓库地址:CatsAndMice/auto-script (github.com)

解析 markdown 文件获取数据

  • 读取 markdown 文件,去除无用的结尾内容

const readMd = (path) => {let content = fs.readFileSync(path, { encoding: 'utf-8'});
    content = content.split('---');
    // 去除结尾无用结尾内容
    content.shift(0, 1);
    return content;
}

markdown 文件中每一段内容都是 —- 分隔,那就间接以它来宰割文件内容为若干块,第一块为结尾内容 content.shift(0, 1) 去除掉

  • 应用 markdown-it 将 markdown 内容渲染成 html 内容,这个时候的 html 仅仅是字符串,jsDom 将 html 字符串转化成 Dom
const mdIt = require('markdown-it')();
const jsdom = require("jsdom");
const {JSDOM} = jsdom;
//...
const parseMd = (md = '') => {const mdHtml = mdIt.render(md)
    const dom = new JSDOM(mdHtml)
    const {window} = dom
    return window
}
//...

实现 markdown 渲染成 html 字符串,html 字符串转化成 Dom 后,间接把 window 这个变量返回进来即可。

  • 引入 jQuery 操作 Dom
const getMdMapValue = (mds = []) => {const mdMap = new Map();
    mds.forEach((md, index) => {
        const id = index + 1
        const window = parseMd(md)
        const $ = require('jquery')(window);
        //...
    })
    return Array.from(mdMap.values())
}
  • 接下来,即应用$ 针对性的获取 Dom 内容
const getMdMapValue = (mds = []) => {const mdMap = new Map();
    mds.forEach((md, index) => {
        const id = index + 1
        const window = parseMd(md)
        const $ = require('jquery')(window);
        
        // 新增
        const answer = parseAnswer($('p'))
        const obj = {id, title: $('h6').text(), result: $('h4').text(), code: $('.language-javascript').text(), answer}
        // 如果选项解析失败,则摈弃该题目
        try {parseSelect($('ul>li'), (key, value) => {const option = { key, value}
                if (obj.options) {obj.options.push(option)
                    return
                }
                obj.options = [option]
            })
            mdMap.set(id, obj)
        } catch (error) {console.warn('解析出错:', error)
        }
        
       
    })
    return Array.from(mdMap.values())
}

其余的逻辑就是将 <code>、<em> 等标签转化成 `、** 等 markdown 符号相干边界性问题解决,不具体粘贴代码,读者能够查看源码

写个小爬虫

我抉择爬取 https://fabiaoqing.com/bqb/li… 网站的表情图,逻辑非常简单,几十行搞定。

还是应用 jsDom 将申请响应的 html 文件内容转化为 Dom,再应用 jQuery 操作。

crawl.js

const axios = require('axios');
const {JSDOM} = require('jsdom');
let $ = require('jquery');
const fs = require('fs');
const path = require('path');

(async () => {const { data} = await axios.get('https://fabiaoqing.com/bqb/lists/type/hot.html')
    const page = new JSDOM(data)
    const window = page.window
    $ = $(window)
    $('.bqppdiv').each(async (index, e) => {const src = $(e).find('.image')[0].getAttribute('data-original')
        const type = path.extname(src)
        const fileName = Date.now() + type
        const {data} = await axios.get(src, {responseType: 'stream'})
        const download = path.join(__dirname, fileName)
        data.pipe(fs.createWriteStream(download))
    })
})()

这里,我仅演示下爬虫不再深刻,相似简略爬虫仅应用 jquery、jsDom 即可搞定,不须要学习其余简单的爬虫工具。

总结

通过解析 markdown 文件将纯 markdown 文本解析成 html 字符串,又将 html 字符串转化成实在的 Dom 对象,再应用 jQuery 来获取 Dom, 达成 markdown 文件内信息转成 JSON 文件作为数据存储的目标,最初演示 NodeJs 操作 Dom,并简略写一个爬虫做为练习。

如果我的文章对你有帮忙,你的👍就是对我的最大反对 ^_^,另外欢送大家关注我的公众号《凌览社》,和我一起成长。

本文由 mdnice 多平台公布

退出移动版