js抓取网页数据

浏览器里打开开发者工具，网页看到那些密密麻麻的数据JSON数据像流水一样从Network面板滚过去的时候，我就知道——又得写爬虫了。网页JS抓网页数据这事，数据说穿了就三步：找到数据藏在哪，网页想办法把它弄出来，数据再处理成你要的网页样子。但每一步都有坑，数据而且坑坑不一样。网页

最常见的数据场景是抓一个列表页。比如你想抓某个电商网站的网页商品价格，打开页面一看，数据HTML结构清清楚楚，网页每个商品都在一个div.item里，数据价格在span.price里。网页这时候你可能会想，直接document.querySelectorAll不就完了？对，但如果网站是React或者Vue写的，你看到的DOM是渲染后的结果，源码里根本没有这些节点。我第一次抓这种页面时，把整个HTML保存下来搜关键词，结果啥也没有——数据全是JS动态塞进去的。

那怎么办？两条路。一条是模拟浏览器行为，用Puppeteer这类无头浏览器。它真的打开一个Chrome实例，等页面加载完，JS执行完，你再从渲染后的DOM里取值。这办法最笨但最稳，适合那些交互复杂的页面——比如要点击“加载更多”按钮才能翻页的。我写过一次抓微博评论的脚本，页面滚到底部才会触发新请求，用Puppeteer的autoScroll函数模拟滚动，每次等500毫秒再抓，虽然慢点，但一条不漏。

另一条路更高效——直接抓接口。打开开发者工具的Network标签，刷新页面，你会看到浏览器发了一堆XHR请求。很多数据根本不在HTML里，而是通过AJAX从后端拿JSON。找到那个返回商品列表的接口，复制它的URL，用Node的fetch或者axios直接请求。但坑来了：接口通常带签名或者token，比如请求头里有个X-Signature，值是某个加密函数算出来的。这时候你得去Sources面板里找那个生成签名的JS文件，断点调试，把算法抠出来。有次我为了破解一个参数加密，硬是把人家压缩过的代码格式化，一行行读，最后发现就是个MD5加上时间戳再倒序——你说气不气人。

拿到数据之后，清洗也够头疼的。HTML里抓下来的字符串可能带各种标签、转义符，价格数字里混着人民币符号和逗号。我习惯用正则把非数字字符剔除，再转成浮点数。但正则写不好容易误伤——比如商品名称里本来就有“5,000积分”这种字样，你得先判断字段类型再决定处理方式。另外，有些数据是异步分批加载的，你抓的时候可能只拿到第一页，得循环请求直到接口返回空数组为止。

还有个容易忽略的点——反爬策略。你请求频率太高，服务器会返回403或者一个验证码页面。我吃过这个亏，有一次抓某招聘网站的职位列表，没设延迟，50个请求后IP直接被封了，只能换代理。后来学乖了，每次请求之间随机sleep 1到3秒，再伪装一下User-Agent，基本就稳了。但别去碰那些需要登录才能看的数据，除非你愿意处理cookie过期和验证码识别，那又是另一个深渊了。

最后提醒一句，别用JS去抓那些有明确robots.txt禁止的页面，也别把抓来的数据商用。技术本身没问题，但得知道边界在哪。