如何获取Web应用中同class的38个div标签内的文本

安全阿岳

2026-5-21

获取批量div内的目标文本方案

嘿，针对你有38个结构一致的div需要提取文本的需求，我给你整理了几种常用的实现方式，根据你的技术栈选就行：

原生JavaScript方案

如果你的项目没用到jQuery这类库，用原生JS完全能搞定，两种思路供你选：

思路1：从父div开始遍历

先定位所有的父div（就是类为w-100 dt pa2 f7的那些），然后逐个深入找到目标span：

// 获取所有父div元素
const parentDivs = document.querySelectorAll('.w-100.dt.pa2.f7');

// 遍历每个div，提取目标文本并存入数组
const targetTexts = Array.from(parentDivs).map(div => {
  // 在当前父div内查找目标span
  const targetSpan = div.querySelector('.pa2.ma0.fl.f6 span.v-mid');
  // 做个判断避免找不到元素报错，同时去除文本前后空白
  return targetSpan ? targetSpan.textContent.trim() : '';
});

// 打印结果，就是38个文本组成的数组
console.log(targetTexts);

思路2：直接定位目标元素

如果目标p标签的类足够唯一，也可以跳过父div，直接定位所有p标签再提取里面的span文本：

// 获取所有包含目标文本的p标签
const targetPTags = document.querySelectorAll('.pa2.ma0.fl.f6');

// 提取文本
const targetTexts = Array.from(targetPTags).map(pTag => {
  const span = pTag.querySelector('.v-mid');
  return span ? span.textContent.trim() : '';
});

jQuery方案（如果项目在用jQuery）

用jQuery的话代码会更简洁，链式调用就能搞定：

// 直接定位所有目标span，提取文本并转成数组
const targetTexts = $('.w-100.dt.pa2.f7 .pa2.ma0.fl.f6 span.v-mid')
  .map(function() {
    return $(this).text().trim();
  })
  .get();

console.log(targetTexts);