JavaScript：如何移除NodeList中前5字符重复的元素？

问题场景 #

你通过 const list = document.querySelectorAll('.list > a') 获取了一个NodeList，每个<a>标签内的<li>包含一段文本。需要移除所有前5个字符与已保留元素重复的项：遍历元素时，每遇到新元素就检查之前是否存在前缀（前5个字符）相同的元素，若有则移除当前元素。

解决方案 #

以下代码可以实现需求，逻辑清晰且高效：

// 将静态NodeList转为可操作的数组
const links = Array.from(document.querySelectorAll('.list > a'));
// 用Set存储已出现的前缀，快速判断重复
const seenPrefixes = new Set();

links.forEach(link => {
  // 获取<li>内的文本，去除首尾空白字符
  const text = link.querySelector('li').textContent.trim();
  // 提取前5个字符，文本长度不足5则取全部内容
  const prefix = text.slice(0, 5);
  
  if (seenPrefixes.has(prefix)) {
    // 前缀已存在，移除当前<a>元素
    link.remove();
  } else {
    // 前缀未出现过，存入Set做标记
    seenPrefixes.add(prefix);
  }
});

代码说明 #

1. NodeList转数组：querySelectorAll返回的是静态NodeList，转成数组后遍历和操作更灵活。
2. Set去重标记：Set的has()方法时间复杂度为O(1)，比数组遍历判断重复效率高很多。
3. 文本处理细节：先去除文本首尾空白，避免空格、换行符干扰前缀判断；如果文本长度不足5个字符，直接取全部内容作为判断依据。
4. 保留逻辑：按DOM顺序遍历，先出现的元素会优先保留，后续前缀重复的元素会被移除，符合你的需求。

注意事项 #

• 如果你的<a>标签内的文本容器不是<li>，请调整link.querySelector('li')的选择器，确保能正确获取目标文本。
• 若需要保留最后出现的元素而非第一个，可以反向遍历数组，调整判断逻辑。

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