无需Node.js，如何使用Cheerio等JavaScript库实现网页抓取？

Got it，既然你只想用纯HTML+JS文件搞定网页抓取，不想碰Node.js，那咱们得从浏览器端的原生能力出发，绕开Node.js生态的工具。先把核心问题和可行方案拆解清楚：

1. 用浏览器原生API替代Request和Cheerio #

你提到的Node.js工具，在前端都有原生替代品：

• Node的request/axios → 直接用浏览器自带的fetch() API发请求
• Node的Cheerio → 完全不需要！浏览器本身就具备完整的DOM解析能力，用DOMParser或者原生DOM操作方法就能搞定

示例：抓取同域内容（无跨域限制） #

假设你要抓取同域名下的/target-page.html，可以直接这么写：

<!DOCTYPE html>
<html>
<body>
  <div id="result-box"></div>

  <script>
    // 用fetch发送HTTP请求
    fetch('/target-page.html')
      .then(res => res.text()) // 把响应转成HTML字符串
      .then(rawHtml => {
        // 解析HTML字符串为可操作的DOM对象
        const parser = new DOMParser();
        const targetDoc = parser.parseFromString(rawHtml, 'text/html');
        
        // 用原生DOM方法提取内容，比如抓所有文章标题
        const articleTitles = targetDoc.querySelectorAll('.article-title');
        const resultBox = document.getElementById('result-box');
        
        articleTitles.forEach(title => {
          const item = document.createElement('div');
          item.textContent = title.textContent;
          resultBox.appendChild(item);
        });
      })
      .catch(err => console.error('抓取失败:', err));
  </script>
</body>
</html>

2. 跨域抓取的解决方案 #

如果目标网站和你的页面不同域名，直接用fetch会被浏览器的同源策略拦截。这里有几个实用的 workaround：

• 目标网站支持CORS：如果对方服务器设置了Access-Control-Allow-Origin响应头允许你的域名访问，那直接用上面的fetch代码就行
• JSONP（仅适用于API接口）：如果目标提供JSONP格式的接口，可以通过动态创建<script>标签来请求，但这种方式只支持GET请求，且只能处理JSON数据，没法直接抓HTML
• 浏览器扩展环境：要是你做的是浏览器扩展，扩展的后台脚本不受同源策略限制，可以在后台完成抓取，再把数据传给前端页面
• CORS代理服务：如果能找个现成的CORS代理（或者用静态托管平台的无服务器函数快速搭一个），可以把请求先发到代理，再由代理转发到目标网站，规避跨域限制

3. 替代Cheerio的前端DOM操作技巧 #

不用Cheerio的话，浏览器原生的这些方法完全够用，语法和Cheerio还很像：

• document.querySelector(selector)：获取匹配选择器的第一个元素
• document.querySelectorAll(selector)：获取所有匹配选择器的元素
• element.textContent：提取元素的纯文本内容
• element.getAttribute('attr-name')：获取元素的指定属性值

重要提醒 #

• 浏览器端抓取很容易触发目标网站的反爬机制，比如IP封禁、验证码，一定要控制请求频率，遵守目标网站的robots.txt规则
• 很多网站的内容是动态渲染的（比如用React/Vue加载），静态fetch只能拿到初始HTML，拿不到动态加载的内容。这种情况下纯前端几乎没办法处理，除非你能借助浏览器扩展的能力

内容的提问来源于stack exchange，提问作者Holmes