如何用JavaScript在GET请求响应中查找HTML标签并提取指定TD内容？

Got it, let's break this down step by step—this is a super common scenario when dealing with legacy or poorly structured HTML that skips proper class/id attributes. Here's a reliable way to pull off what you need using JavaScript (works in both browser and Node.js with a DOM parser):

Step 1: Fetch the HTML Page #

First, send a GET request to retrieve the full HTML content. I'll use axios here for simplicity, but the native fetch API works just as well.

// Using axios (install first with `npm install axios` if in Node.js)
const axios = require('axios'); // Omit this line in the browser

async function scrapeData() {
  try {
    const response = await axios.get('YOUR_TARGET_URL');
    const html = response.data; // Raw HTML content
    // Continue with parsing below...
  } catch (error) {
    console.error('Error fetching page:', error);
  }
}

Step 2: Parse HTML into a DOM Object #

To interact with the HTML like you would in a browser, use the DOMParser API (built into browsers; for Node.js, use packages like jsdom if needed).

// Inside the try block after getting `html`
const parser = new DOMParser();
const doc = parser.parseFromString(html, 'text/html');

Step 3: Locate the Identifying <td> Element #

You have two solid options here:

• Option 1: Traverse all <td> tags (good if you need to handle dynamic text or partial matches)
• Option 2: Use XPath (faster and cleaner for exact text matches)

Option 1: Traverse All <td> Tags #

Loop through every <td> until you find the one with your fixed innerHTML:

const allTdTags = doc.querySelectorAll('td');
let targetTd = null;

for (const td of allTdTags) {
  // Replace 'YOUR_FIXED_IDENTIFIER_TEXT' with your actual innerHTML
  if (td.innerHTML.trim() === 'YOUR_FIXED_IDENTIFIER_TEXT') {
    targetTd = td;
    break;
  }
}

Option 2: Use XPath for Exact Matches #

XPath lets you directly query for the <td> with your exact text, which is more efficient:

// Replace 'YOUR_FIXED_IDENTIFIER_TEXT' with your actual innerHTML
const xpathQuery = `//td[text()='YOUR_FIXED_IDENTIFIER_TEXT']`;
const result = doc.evaluate(xpathQuery, doc, null, XPathResult.FIRST_ORDERED_NODE_TYPE, null);
const targetTd = result.singleNodeValue;

Step 4: Get the Next <td>'s Content #

Once you have the identifying <td>, use nextElementSibling to grab the immediate next element node (avoids text nodes like newlines/spaces). Then extract its content:

if (targetTd) {
  const nextTd = targetTd.nextElementSibling;
  if (nextTd && nextTd.tagName === 'TD') {
    const desiredContent = nextTd.innerHTML; // Or use nextTd.textContent for plain text
    console.log('Extracted content:', desiredContent);
  } else {
    console.error('No valid <td> found after the identifier');
  }
} else {
  console.error('Identifying <td> not found');
}

Key Notes #

• Use trim() when checking innerHTML to ignore accidental whitespace around your identifier text.
• Prefer textContent over innerHTML if you just need plain text (avoids any nested HTML tags in the target <td>).
• For Node.js, if DOMParser isn't available, install and use jsdom to create a DOM environment.

内容的提问来源于stack exchange，提问作者EAzevedo