in

如何使用JQuery解析HTML和提取数据

你的网页有时可能需要使用不提供API的其他网页的信息。例如,你可能需要从一个网页上实时获取股票价格信息,并将其显示在你的网页的一个小部件中。然而,一些股票价格汇总网站并不提供API。

在这种情况下,你需要检索网页的源HTML,并手动找到你需要的信息。这种检索和手动解析HTML以寻找特定信息的过程被称为网络爬取。

在本教程中,你将学习如何使用jQuery来抓取网页,jQuery是一个快速和多功能的解析和操作HTML的工具。尽管jQuery传统上用于从客户端JavaScript有效地与HTML和CSS交互,但它的DOM遍历和操作能力与它的AJAX功能相结合,使它成为网络爬取的可靠选择。


什么是客户端爬取?

客户端爬取包括使用页面的URL将网页的源头作为HTML来获取,并对信息进行解析以获得具体信息。

例如,你可能想建立一个代码搜索引擎。像Stack Overflow这样的网站提供了一个API,可以通过编程访问他们的问题和答案。然而,其他教程网站,如Draft.dev的这个网站,有代码块,但不提供消费信息的API。要阅读他们的代码块,你将不得不使用客户端 爬取,正如本教程所解释的那样。


使用jQuery实现客户端爬取功能

本教程告诉你如何使用jQuery爬取网页。jQuery是一个快速而强大的JavaScript库,支持HTML文档遍历和操作HTML元素属性。它还具有可以处理HTML元素事件的功能。jQuery使用CSS选择器来选择对象。

准备条件

首先,使用<script>标签添加一个对jQuery库的引用:

<script src=“https://code.jquery.com/jquery-3.6.0.min.js”></script>

使用Get获取远程页面

在本节中,你将学习如何使用jQueryget()方法来获取远程页面的HTML。get()方法使用http get请求从服务器上加载数据。

get()请求允许你定义一个回调函数,当get请求成功时可以执行。该回调函数也接受参数。

让我们考虑一下Draft.dev的博客中的一个网页样本。这个网页包含有ID的HTML元素和不同的类,还有一些带有属性。你将获取这个网页的完整HTML代码,并对其进行警告。

为了获取URL,将其传递给jQueryget()方法,并通过alert语句定义一个回调函数。你可以传递由get()请求返回的HTML数据,如下图所示:

这就是你如何使用jQueryget()方法获得一个网页的完整HTML源代码。


使用jQuery的查找方法提取所需的数据

在本节中,你将学习如何从HTML源中提取所需的数据(例如,提取特定HTML元素的文本或提取具有特定类别的元素的文本)。此外,你还将学习如何访问具有相同HTML类的元素。

注意:要知道网页中HTML元素的ID或类别,你可以右击网页,选择查看页面源选项。

jQuery提供了find()方法来搜索DOM元素集合中可用的后裔对象。你可以使用CSS选择器来寻找一个元素。CSS选择器定义了CSS样式所适用的元素。

使用ID获取元素文本

ID属性是用来为你的网页中的HTML元素指定一个唯一的ID。你不能为同一个HTML页面中的多个元素定义相同的ID。网页中的CSS和JavaScript使用这个ID来访问特定的元素,以设置样式或对元素进行任何其他操作。

在爬取数据的过程中,你可以使用这个ID来寻找和访问这个元素。示例的URL有一个ID为why-use-markdown的元素。使用find()方法,你可以找到这个ID的元素并打印它的文本信息。

要找到一个有ID的元素,你需要使用ID选择器,也就是#。例如,要选择一个ID为why-use-markdown的元素,在该元素的ID前加上#,并将其传递给find()方法,如下所示。一旦元素被选中,你可以使用text()方法来访问该元素的文本属性。

$.get('https://draft.dev/learn/how-to-use-markdown', function(html) {

  alert($(html).find("#why-use-markdown").text());
  
});

现在你已经使用它的ID访问了HTML元素。

使用类名获取元素文本

接下来,你将学习如何使用它的类来选择元素。类属性是用来指定HTML元素的类别的。与ID属性不同,你可以在一个网页中拥有多个具有相同类别的元素。

类属性允许你使用CSS定义一组样式。这个样式将被应用于所有使用该特定类定义的元素。在数据 爬取过程中,你可以使用这个类名来找到所有具有特定类的元素,并从这些元素中获取数据。

在示例的URL中,有一个元素的类别为page-title

要找到一个带类的元素,你需要使用类选择器,即.例如,要选择一个带类page-title的元素,用元素的类作为前缀,并把它传递给find()方法,如下所示。一旦元素被选中,你可以使用text()方法来访问该元素的文本属性。

$.get('https://draft.dev/learn/how-to-use-markdown', function(html) {
  alert($(html).find(".page-title").text());
});

这就是你如何找到一个有类的元素。

处理具有相同类别的多个元素

正如前面所讨论的,在一个HTML文档中,有可能有不止一个元素拥有相同的类。因此,你现在将学习如何找到一个以上具有相同类的元素。

你可以使用find()方法用它的类名来寻找一个元素。当有更多具有相同类的元素时,你可以使用each()方法来遍历这些元素。定义的回调函数将被应用于每个元素。

在样本URL中,有多个元素被定义为高亮类。它是用来表示所有有markdown教程的代码块的类。

当你使用这个类找到元素时,你会得到一个jQuery对象的列表。然后你可以使用each()方法来迭代这些元素,并打印元素的文本来打印教程块,如下所示:

// Get HTML from page and fetching the element with ID 

$.get('https://draft.dev/learn/how-to-use-markdown', function(html) {
  
  // Loop through elements you want to scrape content from
  $(html).find(".highlight").each(function() {

    alert($(this).text());

  });

});

[文中代码源自Scrapingbee]

这样你就可以用它的类名找到一个元素,并对匹配的元素进行迭代。

安全方面的考虑

当从一个URL获取数据时,它可能包含脚本。默认情况下,jQuery的API不会运行这些脚本。然而,像<img onerror='script'>这样的HTML代码会间接地执行脚本。因此,你需要小心,清理或逃避脚本的来源。否则,未知的脚本可能会对你的程序造成损害,或者你有可能向黑客提供对你个人信息的访问。

限制条件

使用jQuery的客户端网络 爬取有一些限制。

  1. 网页的来源可能会随着时间的推移而改变。因此,网页的类名或ID的任何变化都可能破坏 爬取应用程序。
  2. 由于HTML元素结构、元素ID和元素类别的变化性质,经常变化的动态网页很难从客户端被 爬取另外,由于安全方面的考虑,脚本在 爬取时不会被执行。所以,被脚本加载的组件不会被加载到动态网页中。
  3. 在用脚本加载数据的情况下,很难对有分页功能的页面进行刮擦。如果分页的实现,每个页面都有一个单独的URL(例如,https://example.com?page=<page_number>),那么只需发出单独的请求,就有可能进行刮擦。然而,如果这些页面是通过AJAX调用加载的(例如,一个无限滚动的页面),那么就很难爬取,因为脚本不能被jQuery执行。

因此,这种方法最适合于利用服务器端渲染、简单静态HTML或单页HTML的页面。


总    结

在这篇文章中,你已经学会了如何使用jQuery进行网页爬取,如何使用它的ID或HTML元素寻找元素,以及如何处理具有相同类别的HTML元素。

jQuery是一个快速和多功能的工具,它提供了解析和操作HTML DOM元素的功能,使你能够为网页建立强大的爬取应用程序。

What do you think?

68

Written by 砖家

68web团队是一支专注于跨境业务和数据获取的专业团队。我们致力于帮助企业成功出海,通过高效的数据爬取服务,为客户提供精准的数据支持;

凭借丰富的经验和专业的技术,我们不仅提供多语言网站建设,还包括国际市场推广和定制化的跨境电商解决方案;

我们的数据爬取平台利用强大的服务器和代理IP,确保获取高质量的数据,以满足客户在AI和大数据时代的需求。我们专注于提供全面的解决方案,助力企业在全球市场上取得成功。

什么是数据解析?

如何使用JSoup在Java中解析HTML