如何使用javscript在get请求的响应中搜索html标签？

Question

I have a get request that returns a whole HTML page and I want to get a specific information from that page that is under one of the many 'td' tags. The tags are simple and dont have any classes or ids.

axios.get("https://example.com")
    .then(res =>{
        console.log(res.data.body) // returns an empty array
        console.log(res.data) // returns the whole html page

        //Here I tried somehow to pass the html page to the document
        //so i could try use jquery or javascript to find the tags
        //This does not work

        document = res.data
        var test = document.getElementsByTagName("td")

        //Here I wanted to loop through the document to find the information
        for(let index = 0; index < res.data.length; index++)
            {
                 console.log(res.data[index])
                 //this outputs each character of the html page

                if(res.data[index].innerHTML == "label")
                {
                   console.log(res.data[index+1])
                 }
            }
    })

I want to find a TD tag with a specific innerHTML. That works like a label and it is always the same. I would then use something like res.data[index+1] to get the next tag and pull out the innerHTML.

Is there a way I can do this?

How can I use javascript to search for html tags on the response of a get request?

That response is from a third part API.

Answer 1

Edit : this might not work on any kind of HTML string. Since you mention a "whole page", it might depend on how clean it is DOM-wise.

Edit 2 (related to the above): if that does not work, you can try this instead:

let $matchingRows = $('<div>').append($.parseHTML(html))
  .find('td')
  // ...

(Source: https://stackoverflow.com/a/30677065/965834 and related questions.)

Original answer:

Since you mention jQuery, you can use $(yourHtmlString) to get a selector from it:

 let html = ` <table> <tr> <td>foo</td> <td>label</td> <td>bar</td> <td>label</td> </tr> </table>`; let $matchingRows = $(html) .find('td') .filter((_, e) => $(e).html() === 'label'); console.log($matchingRows.length); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 

Answer 2

You can create an element and fill the returned html into that so you have an variable/element you can run queries on.

something like this

axios.get("https://example.com")
     .then(res => {
         const doc = document.createElement("div");
               doc.innerHTML = res.data;

         console.log( doc.querySelectorAll("td") );
      });