怎么放代码_手把手教你改一行代码爬取知乎热榜

// 真一行，不骗人!


// 注册一个console的save文件方法
(function (console) {
    console.save = function (data, filename) {
        if (!data) {
            console.error('Console.save: No data')
            return;
        }
        if (!filename) filename = 'console.json'

        if (typeof data === 'object') {
            data = JSON.stringify(data, undefined, 4)
        }
        var blob = new Blob([data], { type: 'text/json' });
        e = document.createEvent('MouseEvents');
        a = document.createElement('a');
        a.download = filename;
        a.href = window.URL.createObjectURL(blob);
        a.dataset.downloadurl = ['text/json', a.download, a.href].join(':');
        e.initMouseEvent('click', true, false, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null);
        a.dispatchEvent(e)
    }
})(console);
// 所有的link都放这里
var links = [];
// 获取li标签（这个li标签的class是HotItem-content）里面的所有a标签
// <li class="HotItem-content"><a href="/xxxx/">XXXX</a>xxxx</a></li >
var allItems = document.getElementsByClassName("HotItem-content");
for (var index = 0; index <= allItems.length; index++) {
    itemValue = allItems[index];
    if (itemValue !== undefined) {
        // 从这个item里面获取a标签
        aItems = itemValue.getElementsByTagName("a");
        // 如果存在a标签，就取第一个
        if (aItems) {
            links.push({ "link": aItems[0]["href"], "linkName": aItems[0].text });
        }
    }
};
console.log("完成抓取，启动保存。");
// 弹出下载按钮
console.save(links, "links.json");

所有的代码如上，需要理解的都写注释了。

怎么玩呢？

首先。

你有一个Chrome浏览器或者火狐浏览器。

然后...

F12打开控制台。

然后切到Console栏目，大概就是长上面这个样子。

我们以“知乎热榜”作为实例玩吧。

现在需求：要所有的热榜题目和链接。

PS：别问为什么要，再问zs。

点击开发者工具的“审查元素”，这个鼠标箭头，然后移动到页面中。

大概会是上面效果。

我们现在要做的是，找到想要抓取的内容在网页里面的HTML代码。

选中标题，点击后就能看到源码了。

PS： 下面的HTML是一种标记语言，格式是 <name></name>,可以各种嵌套。

<a href="https://www.zhihu.com/special/19681091" title="全国新冠肺炎情况怎么样了？">
<h2 class="HotItem-title">全国新冠肺炎情况怎么样了？</h2>
<p class="HotItem-excerpt HotItem-excerpt--multiLine">了解疫情最新进展&gt;&gt;</p>
</a>

完整HTML代码差不多是这个样子，那么我们要的URL和标题都在里面了。

但是如果直接拿页面上所有的a标签的话，肯定是会拿到很多不是我们要的问题。

因为页面上大部门能点击的地方都是a标签。

所以，对于我们来说，就是要 div中class="HotItem-content"里面所有的a标签。

那么，怎么拿呢？

翻会上面的代码，找这一行：

// 把document.getElementsByClassName("className")改成上面HotItem-content
var allItems = document.getElementsByClassName("HotItem-content");

然后，把所有的代码复制一下。

扔到Chrome开发者工具里面的Console控制台执行。

代码帖进去，回车。

随便用个文本编辑器打开，就看到json格式的数据了。

很多时候，我们可能需要Excel表格，那就转换一下格式。

https://json-csv.com/​json-csv.com

随手搜一个JSON to csv。

点击下载，完事。

好了，

完毕，

我去喝快乐水了。