node js 后台解析HTML(获取微博热门搜搜)

一,背景

最近自己准备写一个热门排行榜的功能,自己百度一下Node js 能够解析html的库,自己找到cheerio,这个库发现非常适合自己,因为他的用法跟jquery 类似。于是我拿微博热门搜索来练手,熟悉cheerio库,顺便用一个node js 网络库got

二,逻辑

通过网页源代码,可以分析每个tr下面td class=td-02 下面a标签就是我们要找的元素,那么通过jquery 语法写法 $(“tbody>tr>td.td-02>a”),逻辑就这么简单。

三,代码

const html_parse = require("cheerio")
const got = require("got")

async function getWeibo(){
    var all_data = []
    var respond = await got("https://s.weibo.com/top/summary?cate=realtimehot", {headers:{
        "user-agent": "Mozilla/5.0 (Windows NT 6.1; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/92.0.4515.159 Safari/537.36 Edg/92.0.902.78"
    }})

    if(respond.body){
        let $ = html_parse.load(respond.body)
        let items = $("tbody>tr>td.td-02>a")

        for(let i = 1; i < 10 && i < items.length; i++){
            let item = "https://s.weibo.com";
            let href = $(items[i]).attr("href")
            let text = $(items[i]).text()
            all_data.push({
                href: item + href,
                text: text
            })
        }
    }
    return all_data
}


async function test(){
    let r = await getWeibo()
    console.log(r)
}

test()

代码是不是非常简单,await 只是异步语法糖,自从我用c# 就喜欢用这个语法,避免死亡回调,网络库用got ,我请求替换user-agent,貌似微博也没有做限制,你不设置照样也能获取数据,但我还是加了,以免带来不必要的麻烦,这里面let i = 1 从开始循环,因为它有一个置顶元素,设置1直接过滤掉,这里10 只是我自己主要10条,你可以通过参数传递获取条数。

四:效果图

五,补充

我以前解析html,我都是当成字符串切割,然后再自己解析,虽然这种比较快,但写代码每次都要计算切割,不够通用,如果直接用Html 解析库,就很容易获取了,特别这种类似jquery的查找方法的。


自己最近写前端比较多,经常看到说jquery 落寞之类,我自己反复思考这个问题,我觉得这个无稽之谈。jquery 只是封装操作dom的类而已,vue 或者 react 他们另外数据库绑定而已,他们只是隐藏了dom操作而已,但他们底层也必须实现dom操作元素。对于新手来说用vue 或者react 等等非常舒服,但毕竟不是根本。html + javascript + css 这个永远不会变,那么dom操作永远都需要。这个就好像windows开发程序员,你用了mfc封装 window 操作类,你就觉得windows api 是垃圾可笑。

我觉得开发不能完全只管业务,不去了解任何有关底层知识,这种就是舍本逐源的做法。