本文介绍如何使用 JavaScript 的 Set 结构高效提取并去重所有 <strong> 标签内的纯文本内容，避免重复词汇干扰词汇学习或数据统计场景。
本文介绍如何使用 javascript 的 `set` 结构高效提取并去重所有 `` 标签内的纯文本内容，避免重复词汇干扰词汇学习或数据统计场景。
在构建语言学习工具、内容摘要系统或语义分析前端模块时，常需从 HTML 段落中批量提取被 <strong> 标签包裹的关键词（如重点词汇）。但直接调用 document.getElementsByTagName('strong') 或 querySelectorAll('strong') 返回的是元素集合，其长度反映的是标签数量而非语义唯一性——例如 <strong>Strong</strong> 和 <strong>strong</strong> 在视觉上相同，却因大小写或空格差异被当作不同项；更常见的是完全重复的 <strong>word</strong> 多次出现。
要真正获取语义去重后的强强调词汇列表，核心在于：
- 提取每个 <strong> 元素的规范化文本内容（统一转小写 + 去首尾空格）；
- 利用 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>.
And yes, <strong>paragraph</strong> appears again!
</p>
<div>
Deduped strong words: <span id="output"></span>
</div>
<script>
const output = document.querySelector('#output');
const dedupeStrongWords = () => {
const strongElements = document.querySelectorAll('strong');
const strongWords = new Set();
strongElements.forEach(el => {
const cleanText = el.innerText.toLowerCase().trim();
if (cleanText) { // 过滤空字符串（如 <strong></strong>）
strongWords.add(cleanText);
}
});
// 转为数组并按字母序排序（可选，提升可读性）
const sortedUniqueWords = Array.from(strongWords).sort();
output.textContent = sortedUniqueWords.join(', ');
};
dedupeStrongWords();
</script>✅ 输出效果（基于上述 HTML）：
Deduped strong words: deduped, paragraph, sets, strong, words
anything-to-html
下载
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
立即学习“前端免费学习笔记（深入）”；
? 关键注意事项：
- 使用 innerText（而非 textContent）能更准确反映用户可见文本，自动忽略隐藏样式影响；
- .toLowerCase().trim() 是标准化关键步骤，确保 "Strong " 与 "strong" 视为同一词；
- Set 不保证插入顺序，若需保持首次出现顺序，可用 Array.from() 配合 filter() 手动去重，但 Set 方案在性能与简洁性上更优；
- 若需保留原始大小写形式，可改用 Map 存储 cleanText → originalText 映射，再取 values 去重。
该方法时间复杂度为 O(n)，适用于数百甚至上千个 <strong> 标签的页面，是现代前端中提取唯一强调词汇的标准实践。
