【笑话集市】Nodejs中jsdom 模块使用实例 【网站数据抓取】

【笑话集市】Nodejs中jsdom 模块使用实例 【网站数据抓取】

演示地址：http://115.28.50.138:3000/admin 源码地址：http://git.oschina.net/chenrh/node-joke

本人node新手，各位大侠见笑了

3 回复

当然可以。以下是一个关于如何使用 jsdom 模块从网页中提取数据的示例。这个例子展示了如何使用 jsdom 模块来抓取并解析一个网页中的特定信息。

【笑话集市】Nodejs中jsdom 模块使用实例 【网站数据抓取】

示例说明

在这个示例中，我们将使用 jsdom 模块来抓取一个包含笑话列表的网页，并从中提取出所有的笑话文本。假设我们有一个网页，其 HTML 结构如下：

<!DOCTYPE html>
<html>
<head>
    <title>笑话集市</title>
</head>
<body>
    <h1>最新笑话</h1>
    <div class="jokes">
        <p>为什么程序员喜欢用黑色背景？因为白色屏幕太亮了。</p>
        <p>为什么电脑永远不会感冒？因为它不会呼吸。</p>
        <!-- 更多笑话 -->
    </div>
</body>
</html>

我们的目标是从这个网页中提取所有的笑话段落。

示例代码

首先，确保你已经安装了 jsdom 模块。如果没有安装，可以通过 npm 安装它：

npm install jsdom

然后，你可以使用以下代码来实现数据抓取功能：

const { JSDOM } = require('jsdom');

// 网页的 URL 或者 HTML 内容
const urlOrHtml = 'https://example.com/jokes'; // 替换为实际的网页URL
// 或者直接提供HTML内容
// const htmlContent = '<html>...<html>';

async function fetchJokes() {
    let dom;

    if (urlOrHtml.startsWith('http')) {
        // 使用fetch获取网页内容
        const response = await fetch(urlOrHtml);
        const htmlContent = await response.text();
        dom = new JSDOM(htmlContent);
    } else {
        // 直接使用提供的HTML内容
        dom = new JSDOM(urlOrHtml);
    }

    const document = dom.window.document;
    const jokes = [];

    // 选择所有包含笑话的段落
    const jokeElements = document.querySelectorAll('.jokes p');
    
    jokeElements.forEach(element => {
        jokes.push(element.textContent.trim());
    });

    return jokes;
}

// 调用函数并打印结果
fetchJokes().then(jokes => {
    console.log("抓取到的笑话:");
    jokes.forEach((joke, index) => {
        console.log(`${index + 1}. ${joke}`);
    });
}).catch(error => {
    console.error("抓取过程中发生错误:", error);
});

代码解释

  1. 引入 jsdom：首先，我们导入 jsdom 的核心模块。
  2. 定义 URL 或 HTML 内容：这里定义了一个变量 urlOrHtml，它可以是网页的 URL 或者直接是 HTML 字符串。
  3. 异步函数 fetchJokes：该函数负责从给定的 URL 或 HTML 中提取笑话。
  4. 创建 JSDOM 实例：根据输入的不同（URL 或 HTML），我们创建一个 JSDOM 实例来解析文档。
  5. 选择并提取数据：通过查询选择器 .jokes p 来找到所有的笑话段落，并将它们的内容添加到 jokes 数组中。
  6. 输出结果：最后，我们打印出抓取到的所有笑话。

希望这个示例能够帮助你理解如何使用 jsdom 模块进行简单的网页数据抓取。


作为新手中的新手 进去点了一遍没反应是不是不支持chrome？？

当然可以！下面是一个使用 jsdom 模块从网页中抓取数据的简单示例。假设我们要从一个网页中抓取所有的段落文本。

首先，你需要安装 jsdom 和 axios（用于发送 HTTP 请求）：

npm install jsdom axios

接下来是具体的代码示例：

const { JSDOM } = require('jsdom');
const axios = require('axios');

async function fetchParagraphs(url) {
    try {
        // 发送 HTTP GET 请求获取网页内容
        const response = await axios.get(url);
        const html = response.data;

        // 使用 JSDOM 解析 HTML
        const dom = new JSDOM(html);
        const document = dom.window.document;

        // 抓取所有的 <p> 标签中的文本
        const paragraphs = Array.from(document.querySelectorAll('p')).map(p => p.textContent);

        console.log(paragraphs);
    } catch (error) {
        console.error(`Error fetching the page: ${error.message}`);
    }
}

// 示例网址
const url = 'https://example.com';
fetchParagraphs(url);

代码解释

  1. 安装依赖：

    • jsdom 是一个用于解析 HTML 并提供类似浏览器 API 的库。
    • axios 是一个流行的 HTTP 客户端，用于发送网络请求。

  2. 发送请求：

    • 使用 axios.get 方法向目标 URL 发送 HTTP GET 请求，并获取返回的 HTML 文档。

  3. 解析 HTML：

    • 使用 JSDOM 解析返回的 HTML 文档，生成一个类似浏览器环境的对象。

  4. 提取数据：

    • 使用 DOM 查询方法 document.querySelectorAll('p') 来选择所有 <p> 元素。
    • 将查询结果转换为数组，并提取每个 <p> 元素的文本内容。

  5. 错误处理：

    • 使用 try...catch 结构来捕获并处理可能发生的错误。

这样，你就可以轻松地从任何网页中抓取特定的数据了。希望这个示例对你有所帮助！

回到顶部