如何选取无class的span标签并提取内容分别输出

要处理这段HTML字符串，你可以按以下步骤操作：

• 先把HTML字符串转换成可操作的DOM元素：
  用临时DOM节点解析htmlData是比较直观的方式：

  // 创建临时div容器
  const tempDiv = document.createElement('div');
  tempDiv.innerHTML = htmlData; // 将htmlData插入临时容器
  

• 提取目标span元素：
  直接选择临时容器中a标签下所有无class的span（示例里的span都没有class，直接用选择器即可）：

  const spans = tempDiv.querySelectorAll('a > span:not([class])');
  

• 输出每个span的内容：
  按索引获取内容输出，可通过trim()去掉空白，用replace清理多余的单引号：

  console.log(spans[0].textContent.trim()); // 输出 John Doe
  console.log(spans[1].textContent.trim().replace(/'/g, '')); // 输出 Arizona
  console.log(spans[2].textContent.trim().replace(/'/g, '')); // 输出 Student
  
  // 也可以遍历所有span批量输出
  spans.forEach(span => {
    console.log(span.textContent.trim().replace(/'/g, ''));
  });
  

如果你的htmlData是直接从页面DOM元素获取的outerHTML，其实可以直接操作原DOM元素，省去字符串转DOM的步骤：

// 直接获取页面上的目标元素
const pickItem = document.querySelector('.span3.pickItem');
const spans = pickItem.querySelectorAll('a > span:not([class])');

// 输出内容
console.log(spans[0].textContent.trim());
console.log(spans[1].textContent.trim().replace(/'/g, ''));
console.log(spans[2].textContent.trim().replace(/'/g, ''));

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