如何在JavaScript中实现输入URL列表的去重功能？

没问题，我来帮你搞定重复URL检测的功能，确保列表里只保留唯一的URL项！

先说说原代码里的几个小问题：

• JavaScript里直接用input变量但没获取对应的DOM元素，会报错
• HTML里的id=#list是语法错误，得改成id="list"
• 完全没有重复检测逻辑，所以才会允许重复URL被添加

下面是修改后的完整代码，我会逐部分给你解释：

修改后的HTML（仅修正语法错误） #

<div class="search">
  <div class="center">
    <input type="text" placeholder="https://www.youtube.com/?" id="geturl">
    <input type="submit" value="Add" id="addlist" name="url">
  </div>
</div>
<div class="container" id="list">
  <div class="list-group list-group-flush">
    <ol class="list-item-group" id="songurl"></ol>
  </div>
</div>

修改后的JavaScript（新增重复检测逻辑） #

var addurl = function() {
  // 1. 获取输入框元素和输入的URL，同时去除首尾空格
  const input = document.getElementById('geturl');
  const url = input.value.trim();

  // 2. 先判断是否输入了有效内容，避免添加空项
  if (!url) {
    console.log('请输入有效的URL哦');
    return;
  }

  // 3. 获取列表容器，收集所有已存在的URL
  const songList = document.getElementById('songurl');
  const existingUrls = Array.from(songList.querySelectorAll('li'))
    .map(li => li.textContent.trim()); // 同样去除空格，避免空格导致的误判

  // 4. 检查当前URL是否已经存在
  if (existingUrls.includes(url)) {
    console.log('这个URL已经在列表里啦，不用重复添加～');
    input.value = "";
    return;
  }

  // 5. 如果不重复，就创建新项并添加到列表
  const li = document.createElement('li');
  li.textContent = url; // 用textContent比innerHTML更安全，防止恶意代码注入
  songList.appendChild(li);
  
  // 清空输入框
  input.value = "";
  console.log('Url added successfully');
}

// 给Add按钮绑定点击事件，否则点击没反应哦
document.getElementById('addlist').addEventListener('click', addurl);

关键逻辑说明 #

• 空格处理：用trim()去除URL首尾的空格，避免因为用户输入时不小心加了空格，导致同一个URL被当成不同项
• 重复检测：通过Array.from()把列表里的li元素转成数组，再用map()提取每个li的文本内容，最后用includes()检查当前URL是否已存在
• 安全优化：用textContent代替innerHTML，防止用户输入包含HTML标签的内容，避免XSS安全问题
• 空值判断：先检查输入是否为空，避免添加无效的空项

这样修改后，连续输入相同的URL就会被阻止添加，列表里只会保留唯一的URL啦！

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