JavaScript防重复待办列表实现技巧

例如，当列表中已存在任务 "Buy milk"，其对应

<li>Buy milk<span>×</span></li>

此时 li.textContent 返回 "Buy milk×"（注意末尾无空格），而用户输入的 inputBoxValue 是 "Buy milk"。二者自然不等，checkTask() 错误返回 false，导致重复添加。

✅ 正确解法是：在校验前，从 textContent 中剥离删除符号 ×。最直接的方式是在比较前调用 .replace("×", "")：

function checkTask(task) {
  const listElements = toDoList.getElementsByTagName("li");
  for (let i = 0; i < listElements.length; i++) {
    // 关键修复：移除 × 符号后再比对
    const cleanText = listElements[i].textContent.trim().replace("×", "");
    if (cleanText === task) {
      return true;
    }
  }
  return false;
}

⚠️ 注意事项：

• replace("×", "") 仅替换第一个匹配项；若未来支持多符号或更复杂结构，建议改用正则 /[×\u00d7]/g 全局清除；
• 更健壮的设计是将任务文本与操作控件物理分离：例如用 包裹纯文本，× 独立存在，校验时只读取 .task-text.textContent，从根本上避免干扰；
• 当前方案依赖符号字面量，若 CSS 使用伪元素（如 ::after）渲染 ×，则 textContent 不包含它——此时无需 replace，但需确保样式层不破坏语义结构。

最终，配合清晰的用户反馈（如 alert("Task already exists")）和输入清空逻辑，即可实现稳定、无冗余的待办添加体验。记住：DOM 文本校验必须反映“用户感知的内容”，而非“原始 HTML 结构内容”。

本篇关于《JavaScript防重复待办列表实现技巧》的介绍就到此结束啦，但是学无止境，想要了解学习更多关于文章的相关知识，请关注golang学习网公众号！