Cheerio技术问询：如何抓取HTML元素后的独立文本内容

给定如下HTML结构，需要抓取<time>标签内的两段独立文本（这两段文本未被包裹在其他HTML元素中）：

<div>
   <time>
   <svg>...</svg>
   "first string I want to grab"
    <svg>...</svg>
   "second string I want to grab"
   </time>
</div>

你尝试过的两种代码：

• 尝试1：

$(item).find('div').find('time').find('svg:nth-of-type(2)').text();

• 尝试2：

const result = [...$(item).find('header').find('div').find('span:nth-of-type(1)').find('time').childNodes]
                 .filter(e =>
                     e.nodeType === Node.TEXT_NODE && e.textContent.trim()
                 )
                 .map(e => e.textContent.trim());

正确解决方法 #

你的第二种思路方向是对的，但需要适配Cheerio的API调整细节：

// 先定位到目标time元素，根据实际DOM结构调整选择器
const timeEl = $(item).find('div > time');
// 提取time元素下的所有非空文本节点
const targetTexts = [...timeEl.contents()]
  .filter(node => {
    // Cheerio中文本节点的type为'text'，同时过滤纯空白内容
    return node.type === 'text' && node.textContent.trim();
  })
  .map(node => node.textContent.trim());

// 结果：targetTexts = ["first string I want to grab", "second string I want to grab"]

如果你的实际页面结构里确实存在header和span，只需把选择器改成对应路径即可：

const timeEl = $(item).find('header div span:nth-of-type(1) > time');

关键说明

• Cheerio里用contents()方法获取元素的所有子节点（包括文本节点），比直接访问childNodes更贴合其API；
• 不用Node.TEXT_NODE，直接通过node.type === 'text'判断文本节点更可靠；
• 过滤步骤必须剔除纯空白的文本节点，避免抓取到换行、空格这类无效内容。

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