如何使用 jQuery进行网页抓取

如何使用jQuery进行网页抓取

作者姚伟斌

在此网络抓取 jQuery 教程中，您将学习如何构建 jQuery 网络爬虫。jQuery 是最流行的 JavaScript 库之一。具体来说，jQuery 支持 HTML 文档遍历和操作。

这使得 jQuery 成为抓取网页以执行网页抓取的完美库。在这里，您将看到是否可以使用 jQuery 进行客户端抓取。此外，您还将学习如何使用 jQuery 进行服务器端抓取。

现在让我们创建一个 jQuery 抓取器并实现您的数据检索目标。

什么是客户端抓取？

客户端抓取涉及直接从浏览器执行网络抓取技术。换句话说，前端执行客户端网络抓取。通常，通过 JavaScript。因此，客户端抓取是关于在您的浏览器中从 Web 检索信息。

您可以通过调用公共 API 或解析网页的 HTML 内容来实现客户端抓取。请记住，大多数网站不提供公共 API。因此，您通常必须下载 HTML 文档并解析它们以提取数据。

现在让我们学习如何使用 jQuery 执行客户端抓取！

如何使用 jQuery 抓取网页？

首先，您需要下载目标网页的 HTML 内容。让我们学习如何在 jQuery 中实现这一点。具体来说，让我们获取https://google.com/网页并获取其 HTML 内容。

您可以使用 jQueryget()方法实现此目的。get()执行 GET HTTP 请求并公开服务器在回调中返回的内容。使用get()如下：

$.get("https://google.com/", function(html) { 
    console.log(html); 
});

然而，这个片段是行不通的！那是因为你会得到No 'Access-Control-Allow-Origin' header is present on the requested resourceCORS（跨源资源共享）错误。

发生这种情况是因为您的浏览器正在执行 HTTP 请求。出于安全原因，现代浏览器自动使用OriginHTTP 标头。详细地说，他们将您从中运行请求的域放在该标头中。

为了符合新的 CORS 规则，Web 服务器应该应用域保护方法。这将阻止来自不需要的域的请求，同时允许其他域。因此，如果您的目标服务器不允许您的域，您将收到上面看到的CORS错误。这就是为什么您无法使用 JavaScript 从其他网站抓取客户端内容的原因。

那么，下一个问题也就随之产生了。

抓取网站的最佳方法是什么？

答案很简单。正如您刚刚了解到的那样，出于安全原因，客户端抓取功能太有限了。在撰写本文时，抓取网站的最有效方法是通过服务器端抓取。

通过执行服务器端抓取，您将能够避免前面看到的 CORS 问题。那是因为你的服务器将执行 HTTP 请求，而不是你的浏览器。因此，不会有 CORS 问题。

你可能认为 JavaScript 是一种前端技术，你不能在你的服务器上使用它。这不是真的。您实际上可以使用 Node.js 构建一个 JS 网络抓取工具。

jQuery 也是如此吗？

你能在 Node.js 中使用 jQuery 吗？

简短的回答是肯定的。您可以在 Node.js 中使用 jQuery。您所要做的就是jquery npm library使用以下命令安装：

npm install jquery

您现在可以使用它来构建 jQuery 网络蜘蛛。让我们学习如何做！

如何使用 jQuery 从网站上抓取数据？

在这里，您将学习如何使用 jQuery 在https://scrapeme.live/shop/.

这就是目标网页的样子：

general-view-scrapeme-live的一般看法scrapeme.live/shop

您可以在此 GitHub 存储库中找到演示 jQuery 网络抓取工具的代码。克隆它并使用以下命令安装项目的依赖项：

git clone https://github.com/Tonel/web-scraper-jquery 
cd web-scraper-jquery 
npm install

然后，使用以下命令启动 jQuery 网络蜘蛛：

npm run start

按照本教程学习如何使用 Node.js 构建 jQuery 网络抓取应用程序！

先决条件

以下是让简单的 jQuery 爬虫工作所需的列表：

如果您的系统上没有安装 Node.js，您可以通过上面的链接下载它。

jQuery 需要一个window文档才能工作。由于windowNode 本身不存在这样的对象，您可以使用jsdom. 如果您不知道该项目，jsdom它是 Node.js 的许多 Web 标准的 JS 实现。具体来说，它的目标是模拟网络浏览器以进行测试和抓取。

然后，您可以在 Node.js 中使用 jQuery 执行抓取，如下所示：

const { JSDOM } = require( "jsdom" ); 
// initialize JSOM in the "https://target-domain.com/" page 
// to avoid CORS problems 
const { window } = new JSDOM("", { 
    url: "https://target-domain.com/", 
}); 
const $ = require( "jquery" )( window ); 
 
// scraping https://target-domain.com/ web pages

请注意，您必须在初始化时指定选项以避免 CORS 问题urlJSDOM。在这里了解更多信息。

get()使用 jQuery函数检索 HTML 文档

如前所述，您可以使用 jQueryget()功能下载 HTML 文档。

 
const { JSDOM } = require( "jsdom" ); 
// initialize JSOM in the "https://scrapeme.live/" page 
// to avoid CORS problems 
const { window } = new JSDOM("", { 
    url: "https://scrapeme.live/", 
}); 
const $ = require( "jquery" )( window ); 
 
$.get("https://scrapeme.live/shop/", function(html) { 
    console.log(html); 
});

这将打印：

 
<!doctype html> 
<html lang="en-GB"> 
<head> 
<meta charset="UTF-8"> 
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2.0"> 
<link rel="profile" href="http://gmpg.org/xfn/11"> 
<link rel="pingback" href="https://scrapeme.live/xmlrpc.php"> 
 
<title>Products – ScrapeMe</title> 
<!-- omitted for brevity ... -->

这正是https://scrapeme.live/shop/HTML 内容的样子！

在 jQuery 中提取所需的 HTML 元素find()

现在，让我们检索与每个产品相关的信息。右键单击产品 HTML 元素。然后，通过选择“检查”选项打开 DevTools 窗口。这就是你应该得到的：

product-on-devtools-scrapeme-live选择产品 HTML 元素后的 DevTools 窗口

如您所见，li.product是标识产品元素的CSS 选择器。find()您可以使用以下方法检索这些 HTML 元素的列表：

$.get("https://scrapeme.live/shop/", function(html) { 
    const productList = $(html).find("li.product"); 
});

详细地说，jQueryfind()函数返回与作为参数传递的 CSS 选择器、jQuery 对象或 HTML 元素相匹配的 DOM 元素集。

$.get("https://scrapeme.live/shop/", function(html) { 
    // retrieve the list of all HTML products 
    const productHTMLElements = $(html).find("li.product"); 
});

请注意，每个产品 HTML 元素都包含一个 URL、一个名称、一个图像和一个价格。a您可以分别在、img、h2、 HTML 元素中找到此信息span。您可以使用 jQuery 提取此数据，find()如下所示：

$.get("https://scrapeme.live/shop/", function(html) { 
    // retrieve the list of all HTML products 
    const productHTMLElements = $(html).find("li.product"); 
 
    const products = []; 
     
    // populate products with the scraped data 
    productHTMLElements.each((i, productHTML) => { 
        // scrape data from the product HTML element 
        const product = { 
            name: $(productHTML).find("h2").text(), 
            url: $(productHTML).find("a").attr("href"), 
            image: $(productHTML).find("img").attr("src"), 
            price: $(productHTML).find("span").first().text(), 
        }; 
 
        products.push(product); 
    }); 
 
    console.log(JSON.stringify(products)); 
 
    // store the product data on a db ... 
});

如您所见，使用 jQueryattr()和text()函数，您可以获得所需的所有数据。这只需要几行代码。详细地说，attr()返回作为参数传递的 HTML 属性中包含的数据。相反，text()返回所选 HTML 元素中包含的所有文本。

运行时，这将打印：

[ 
    { 
        "name": "Bulbasaur", 
        "url": "https://scrapeme.live/shop/Bulbasaur/", 
        "image": "https://scrapeme.live/wp-content/uploads/2018/08/001-350x350.png", 
        "price": "£63.00" 
    }, 
    { 
        "name": "Ivysaur", 
        "url": "https://scrapeme.live/shop/Ivysaur/", 
        "image": "https://scrapeme.live/wp-content/uploads/2018/08/002-350x350.png", 
        "price": "£87.00" 
    }, 
 
    // ... 
 
    { 
        "name": "Beedrill", 
        "url": "https://scrapeme.live/shop/Beedrill/", 
        "image": "https://scrapeme.live/wp-content/uploads/2018/08/015-350x350.png", 
        "price": "£168.00" 
    }, 
    { 
        "name": "Pidgey", 
        "url": "https://scrapeme.live/shop/Pidgey/", 
        "image": "https://scrapeme.live/wp-content/uploads/2018/08/016-350x350.png", 
        "price": "£159.00" 
    } 
]

此时，您应该将抓取的数据保存到数据库中。此外，您可以扩展您的爬行逻辑以遍历所有分页页面，如JavaScript 中的网络爬行教程所示。

瞧！您刚刚学习了如何通过抓取https://scrapeme.live/shop/来检索所有产品信息。

html()用jQuery函数获取HTML元素内容

抓取时，请考虑存储每个感兴趣的 DOM 元素的原始 HTML。这使得将来在相同元素上运行抓取过程更容易。您可以使用 jQueryhtml()函数实现此目的，如下所示：

const product = { 
    name: $(productHTML).find("h2").text(), 
    url: $(productHTML).find("a").attr("href"), 
    image: $(productHTML).find("img").attr("src"), 
    price: $(productHTML).find("span").first().text(), 
    // store the original HTML content 
    html: $(productHTML).html() 
};

对于 Blastoise，这将包含：

{ 
    "name": "Blastoise", 
    "url": "https://scrapeme.live/shop/Blastoise/", 
    "image": "https://scrapeme.live/wp-content/uploads/2018/08/009-350x350.png", 
    "price": "£76.00", 
    "html": "nt<a href="https://scrapeme.live/shop/Blastoise/" class="woocommerce-LoopProduct-link woocommerce-loop-product__link"><img width="324" height="324" src="https://scrapeme.live/wp-content/uploads/2018/08/009-350x350.png" class="attachment-woocommerce_thumbnail size-woocommerce_thumbnail wp-post-image" alt="" srcset="https://scrapeme.live/wp-content/uploads/2018/08/009-350x350.png 350w, https://scrapeme.live/wp-content/uploads/2018/08/009-150x150.png 150w, https://scrapeme.live/wp-content/uploads/2018/08/009-300x300.png 300w, https://scrapeme.live/wp-content/uploads/2018/08/009-100x100.png 100w, https://scrapeme.live/wp-content/uploads/2018/08/009-250x250.png 250w, https://scrapeme.live/wp-content/uploads/2018/08/009.png 475w" sizes="(max-width: 324px) 100vw, 324px"><h2> class="woocommerce-loop-product__title">Blastoise</h2>nt<span class="price"><span class="woocommerce-Price-amount amount"><span>76.00 class="woocommerce-Price-currencySymbol">£</span>76.00</span></span>n</a><a> href="/shop/?add-to-cart=736" data-quantity="1" class="button product_type_simple add_to_cart_button ajax_add_to_cart" data-product_id="736" data-product_sku="5212" aria-label="Add “Blastoise” to your basket" rel="nofollow">Add to basket</a>" 
}

请注意，该html字段存储原始 HTML 内容。如果您想从中检索更多数据，现在无需再次抓取整个网站即可完成。

在 jQuery 中使用正则表达式

从 HTML 文档中检索感兴趣的数据的最佳方法之一是通过 jQuery 正则表达式。正则表达式或正则表达式是定义文本搜索模式的字符序列。

例如，假设您要检索每个产品元素的价格。如果<span>包含价格的元素没有唯一的 CSS 类，提取此信息可能会变得很困难。您可以通过在 jQuery 中使用正则表达式来实现这一点，如下所示：

const prices = new Set(); 
// use a regex to identify price span HTML elements 
$(html).find("span").each((i, spanHTMLElement) => { 
    // keep only HTML elements whose text is a price 
    if (/^£d+.d{2}$/.test($(spanHTMLElement).text())) { 
        // add the scraped price to the prices set 
        prices.add($(spanHTMLElement).text()); 
    } 
}); 
 
// use the price data to achieve something ...

在循环结束时，prices将包含以下结果：

["£0.00","£63.00","£87.00","£105.00","£48.00","£165.00","£156.00","£130.00","£123.00","£76.00","£73.00","£148.00","£162.00","£25.00","£168.00","£159.00"]

这些正是网页上包含的价格。

恭喜！您刚刚学习了如何掌握构建 jQuery 网络爬虫的所有构建块。

jQuery 对网络抓取有什么好处？

考虑到 jQuery 的流行程度，您很可能熟悉它。详细地说，您可能知道如何使用 jQuery 遍历 DOM。这是使用 jQuery 进行网络抓取的主要好处。

毕竟，抓取就是选择 HTML 元素并从中提取数据。如果您已经使用 jQuery 检索 HTML 元素，那么您已经完成了大部分工作。

此外，jQuery 是最常用的 DOM 操作库之一。这是因为它有许多功能可以毫不费力地提取和更改 DOM 中的数据。这使它成为抓取的完美工具。

jQuery 是如此强大以至于它不需要其他依赖项来执行网页抓取！详细地说，jQuery 提供了构建完整的抓取应用程序所需的一切。但是，您可能更喜欢使用 HTTP 客户端，例如 Axios。了解有关使用 Axios 进行网页抓取的更多信息。

结论

在这里，您学习了关于 jQuery 中的网页抓取的所有知识，从基本技术到高级技术。如上所示，在 jQuery 中构建网络抓取工具并不难，但在客户端执行它有局限性。

要避免客户端限制，您需要做的就是将 jQuery 与 Node.js 一起使用，在这里您看到了如何做到这一点。

具体来说，在本文中您了解到：

  • 为什么可能无法进行客户端抓取
  • 如何在 Node.js 中使用 jQuery
  • 如何find()在 jQuery 中使用正则表达式执行 Web 抓取
  • 为什么 jQuery 是一个优秀的网页抓取工具
姚伟斌

程序猿

我是姚伟斌，也被称为文景。我的专业领域涵盖了开放源代码的深度探索、网络编程和网络建站。我热衷于分享我的编程和建站实践经验，尤其擅长于Nginx和Proxy服务器的管理。此外，我还对Python和NodeJS这两种编程语言有着深刻的理解和独到的见解。

最近，我致力于爬虫技术的研究，探索如何通过高效的数据抓取为项目增添价值。我的目标是通过持续的学习和创新，为开放源代码社区贡献我的力量，并帮助那些对网络编程和网站建设感兴趣的人士。

类似文章