CheerioJS was unable to identify and select the anchor tag

Question

CheerioJS was unable to identify and select the anchor tag

I am trying to extract all the download links from the HTML source provided below:

https://i.sstatic.net/CvEMF.png

Below is the code I am currently using:

export const getSingleMusic = async (url) => {
    const html = await getHtml(url)
    const $ = cheerio.load(html)

    const downloadSection =  $('#mt-modal-download .col-4')

    downloadSection.each((i, elem) => {
        console.log($(elem).find('a').html())
    })
}

However, the output I am getting is different:

https://i.sstatic.net/GFpiB.png

Can someone please guide me on how to correctly select the download links?

javascript web-scraping cheerio

Answer 1

Answer №1

When using jQuery, $elem.html() will give you the innerHTML of the element. A similar function in Cheerio used to return the outerHTML, but this behavior has been updated. Now, .html() returns outerHTML, while .html(html) sets innerHTML so you can use $elem.html() for innerHTML and $.html($elem) for outerHTML.

To print the anchor links, you can use $.html() like this:

downloadSection.each((i, elem) => {
  console.log($.html($(elem).find('a')));
});

Alternatively, you can directly access the $(elem).html() to get the innerHTML containing the anchor links:

downloadSection.each((i, elem) => {
  console.log($(elem).html());
});

Answer 2

When using jQuery, $elem.html() will give you the innerHTML of the element. A similar function in Cheerio used to return the outerHTML, but this behavior has been updated. Now, .html() returns outerHTML, while .html(html) sets innerHTML so you can use $elem.html() for innerHTML and $.html($elem) for outerHTML.

To print the anchor links, you can use $.html() like this:

downloadSection.each((i, elem) => {
  console.log($.html($(elem).find('a')));
});

Alternatively, you can directly access the $(elem).html() to get the innerHTML containing the anchor links:

downloadSection.each((i, elem) => {
  console.log($(elem).html());
});

CheerioJS was unable to identify and select the anchor tag

Answer №1

Similar questions

Uploading an image using ajax with multer

Timing of Vue mounting and initialization phases

Loading animation reminiscent of a whirlpool, similar to the movement

Having trouble with JavaScript concat function not behaving as it should? Can you provide more details to

How come executing a function in the Node.js REPL using )( actually functions?

React component stuck in endless loop due to Intersection Observer

How can we display data from the database in a table if the data is stored as a string separated by commas using Ajax?

Enlarging the current division while reducing the size of the others when hovering

What kind of data type should the value property of Material UI TimePicker accept?

Connecting to a specific mui-tab with react-router-dom

Copying the position of one object to another in THREE.js does not function as expected

Axios fails to input data into the table

Using either Canvas.toBlob or Canvas.toDataURL results in me obtaining an image with a transparent

Tips for scrolling an element within its parent container as a fixed element moves past it

Change the JavaScript code to output HTML rather than just plain text

I am currently working on creating a navigation bar for a webpage using the express framework and pug library. However, when I navigate to the demo page endpoint, the screen appears blank and nothing is displayed

Encountered an unexpected token '<' while attempting to renderToString() in SSR with React

Customizing Magnific Popup: Changing showCloseBtn and closeOnBgClick settings during display

A common challenge in React is aligning the button and input line on the same level

Utilizing ng-class with Boolean values in AngularJS