如何从输入的列表中删除重复项？（Javascript）[关闭]答案

【问题标题】：How do I remove duplicates from a list from input? (Javascript) [closed]如何从输入的列表中删除重复项？（Javascript）[关闭]
【发布时间】：2023-03-03 20:40:01
【问题描述】：

在连续两次或三次输入链接时，我需要帮助检测重复值。每当我尝试从输入框中添加相同的字符串时，它会按照应有的方式添加，但我想停止再次添加相同的字符串。输入应该会阻止我将完全相同的字符串添加到列表中。

不是这个

https://www.youtube.com/watch?v=q07RanslaGM

https://www.youtube.com/watch?v=ryw9dHlr7Mw

但是这个

https://www.youtube.com/watch?v=q07RanslaGM

https://www.youtube.com/watch?v=ryw9dHlr7Mw

它们不应该相同。

--Javascript--
var addurl = function() {
var url = input.value;
var li = document.createElement('li');
li.innerHTML = url;
song = document.getElementById('songurl');
song.appendChild(li);
document.getElementById("geturl").value = "";
console.log('Url added');
}

--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>

谢谢！

【问题讨论】：

developer.mozilla.org/en-US/docs/Web/API/URL/URL

标签： javascript input duplicates

【解决方案1】：

input = ["https://www.youtube.com/watch?v=q07RanslaGM",

"https://www.youtube.com/watch?v=q07RanslaGM",

"https://www.youtube.com/watch?v=ryw9dHlr7Mw"]

output =  Array.from(new Set(input))

输出将是：数组 [ "https://www.youtube.com/watch?v=q07RanslaGM", "https://www.youtube.com/watch?v=ryw9dHlr7Mw" ]

【讨论】：

【解决方案2】：

一个想法可能是添加一个列表来保存 url，在创建新元素之前检查新 url 是否在列表中。

--Javascript--
var urlList = []
var addurl = function() {
var url = input.value;
if (urlList.findIndex(u => u === url) < 0) {
  console.log('URL already added')
  return
}
urlList.push(url)
var li = document.createElement('li');
li.innerHTML = url;
song = document.getElementById('songurl');
song.appendChild(li);
document.getElementById("geturl").value = "";
console.log('Url added');
}

【讨论】：