React Native中使用querySelector解析网页获取指定类元素的方法

React Native 没有内置 DOM 环境，无法直接使用浏览器的 querySelector API，你需要借助第三方 HTML 解析库来实现类似的查询功能，具体步骤如下：

1. 安装解析库 #

推荐使用 cheerio（轻量级、语法贴近 jQuery，上手成本低），执行安装命令：

npm install cheerio
# 或使用 yarn
yarn add cheerio

2. 解析HTML字符串并查询目标元素 #

假设你已通过网络请求拿到 www.google.com 的 HTML 字符串（记为 htmlContent），可按以下代码处理：

import cheerio from 'cheerio';

// 加载HTML内容，模拟DOM查询环境
const $ = cheerio.load(htmlContent);

// 用类选择器查询目标元素，语法和querySelector一致
const targetElements = $('.lnXdpd');

// 遍历元素，获取内容或属性
targetElements.each((index, element) => {
  // 获取元素文本内容
  const elementText = $(element).text();
  // 获取元素的指定属性，比如链接href
  const elementHref = $(element).attr('href');
  console.log(`第${index+1}个目标元素：文本=${elementText}，链接=${elementHref}`);
});

注意事项 #

• 若解析失败，先检查HTML字符串是否完整、格式是否合规，部分网站存在反爬机制，返回内容可能被混淆，需先处理再解析。
• 除了cheerio，也可选择 htmlparser2 等库，但cheerio的API更贴近浏览器DOM操作，更易上手。

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