如何从 HTML 文档中提取去重后的标签内文本-js教程-PHP中文网

本文介绍如何使用 JavaScript 的 Set 结构高效提取并去重所有标签内的纯文本内容，避免重复词汇干扰，适用于词汇学习、内容分析等场景。

本文介绍如何使用 javascript 的 `set` 结构高效提取并去重所有 `` 标签内的纯文本内容，避免重复词汇干扰，适用于词汇学习、内容分析等场景。

在构建词汇学习页面或内容提取工具时，常需批量获取标签包裹的关键词（如重点单词）。但直接调用 document.querySelectorAll('strong') 仅返回 DOM 元素集合，其 .innerText 值可能存在大小写差异（如 "Strong" 和 "strong"）或首尾空格，导致逻辑上相同的词被误判为不同项——这正是原问题中“HTMLCollection 包含重复强文本”的根本原因。

解决思路是：不操作 DOM 集合本身（HTMLCollection / NodeList 不可直接去重），而是提取语义内容，交由 JavaScript 数据结构处理。Set 是最自然的选择，它自动确保唯一性，且支持字符串级去重。

以下为完整实现方案：

<p>
  This is a <strong>paragraph</strong> where some words are marked as <strong>strong</strong>.
  <strong>Strong</strong> words should be <strong>deduped</strong> somehow.
  The easiest way is using <strong>sets</strong>.
</p>
<div>
  Deduped strong words: <span id="output"></span>
</div>

const output = document.querySelector('#output');

const dedupeStrongWords = () => {
  const strongElements = document.querySelectorAll('strong');
  const strongWords = new Set();

  for (const el of strongElements) {
    const word = el.innerText.trim().toLowerCase(); // 统一转小写 + 清除空格
    strongWords.add(word);
  }

  // 转为数组后排序（可选），提升可读性
  const sortedUniqueWords = Array.from(strongWords).sort();
  output.textContent = sortedUniqueWords.join(', ');
};

dedupeStrongWords();

✅ 关键要点说明：

使用 querySelectorAll('strong') 替代 getElementsByTagName('strong')，返回静态 NodeList，避免动态集合引发的潜在迭代问题；
innerText 比 textContent 更符合语义（忽略隐藏元素、尊重 CSS 渲染），适合提取用户可见词汇；
.trim().toLowerCase() 是去重前的标准化步骤，确保 " Word " 和 "word" 被视为同一项；
Array.from(set) 将 Set 转为数组，便于后续排序、映射或渲染；
若需保留原始大小写格式，可改用 Map 存储首次出现的原始文本（如 map.set(word.toLowerCase(), word)），但本例以简洁性优先。

最终输出示例：deduped, paragraph, sets, strong, words —— 精确反映文档中语义唯一的 内容，无重复、无大小写干扰，可直接用于词表生成或前端展示。