Скачать или смотреть How to Retrieve All href Links with jQuery and Cheerio in Node.js

Learn how to effectively retrieve multiple `href` attributes from anchors in a webpage using jQuery and Cheerio in Node.js. Discover a simple solution to the common issue of only getting the first link.
---
This video is based on the question https://stackoverflow.com/q/70160044/ asked by the user 'aen612' ( https://stackoverflow.com/u/5364961/ ) and on the answer https://stackoverflow.com/a/70163453/ provided by the user 'pguardiario' ( https://stackoverflow.com/u/966023/ ) at 'Stack Overflow' website. Thanks to these great users and Stackexchange community for their contributions.

Visit these links for original content and any more details, such as alternate solutions, latest updates/developments on topic, comments, revision history etc. For example, the original title of the Question was: jQuery Only Returning First .attr('href');

Also, Content (except music) licensed under CC BY-SA https://meta.stackexchange.com/help/l...
The original Question post is licensed under the 'CC BY-SA 4.0' ( https://creativecommons.org/licenses/... ) license, and the original Answer post is licensed under the 'CC BY-SA 4.0' ( https://creativecommons.org/licenses/... ) license.

If anything seems off to you, please feel free to write me at vlogize [AT] gmail [DOT] com.
---
How to Retrieve All href Links with jQuery and Cheerio in Node.js

When crawling web pages, accessing all hyperlinks can sometimes be tricky, especially if you're using libraries like jQuery and Cheerio in a Node.js environment. One common issue developers encounter is that jQuery only returns the first href when trying to extract all anchor link attributes. In this post, we'll explore why this occurs and how to correctly retrieve multiple href links from your targeted elements.

The Problem Explained

As you dive into web scraping with Cheerio, you might find something frustrating: your code works perfectly for retrieving text but not for the href values of links within the same anchor. For instance, when you try to use:

[[See Video to Reveal this Text or Code Snippet]]

You get only the first href, ignoring all subsequent ones. This situation can lead to confusion, especially if multiple links are embedded within the same section of your HTML.

Example Scenario

Let's look at a specific example that illustrates the issue. You have a snippet of an HTML document with multiple anchor tags that contain different links:

[[See Video to Reveal this Text or Code Snippet]]

When executing the code to fetch these links, if set up improperly, your output will just show Link 1 and ignore Link 2.

The Solution

The key to resolving this issue lies in using a combination of Cheerio’s .get() method and JavaScript’s .map() function. This approach allows you to iterate over each anchor tag and collect all their href attributes into an array.

Step-by-Step Guide

Here's how to do it:

Select and Iterate Over the Elements:
Use .find('a') to select all anchor tags within the targeted element.

Retrieve All href Attributes:
By utilizing the .get() method, convert the selected jQuery object into a standard array. This enables the use of the .map() function to extract each href efficiently.

Code Implementation:

Here’s a snippet that demonstrates how to accomplish this:

[[See Video to Reveal this Text or Code Snippet]]

Explanation of the Code:

$(element).find('a').get(): This retrieves all anchor elements as an array.

.map(a => $(a).attr('href')): For each anchor element, it gets the href attribute, effectively collecting all links into an array.

console.log('LINK(s): \n' + links.join('\n')): This line joins the array elements into a single string for better readability in the output.

Conclusion

By utilizing the power of Cheerio and JavaScript's array manipulation capabilities, you can streamline your web scraping tasks to effectively retrieve multiple href attributes from anchor tags. Instead of facing the common limitation of getting just the first link, this solution ensures that all the relevant information is at your fingertips.

Happy coding, and happy scraping!