Fatal编程技术网
  • javascript/
  • JavaScript数组。包括返回false（比较链接数组中的用户输入）

JavaScript数组。包括返回false（比较链接数组中的用户输入）

javascript arrays

JavaScript数组。包括返回false（比较链接数组中的用户输入）,javascript,arrays,Javascript,Arrays,我想做一个函数- 获取页面上的所有链接，将这些链接与用户输入的链接进行比较，并检查页面上是否已经存在该链接 似乎我可以从输入框中获取值，并将链接转换为数组。但是，即使我匹配了这些值（例如，.includes函数），它也会不断返回false 我已尝试将数组转换为字符串。这是可行的，但它比较了一切，而不是具体的链接。（例如，即使我只是在输入框中输入“h”，它也会说存在重复链接。） 网址： 0 函数grabLinks（）{ //从输入获取URL var URL=document.getElement

我想做一个函数-

获取页面上的所有链接，将这些链接与用户输入的链接进行比较，并检查页面上是否已经存在该链接

似乎我可以从输入框中获取值，并将链接转换为数组。但是，即使我匹配了这些值（例如，.includes函数），它也会不断返回false

我已尝试将数组转换为字符串。这是可行的，但它比较了一切，而不是具体的链接。（例如，即使我只是在输入框中输入“h”，它也会说存在重复链接。）


网址：

0
函数grabLinks（）{
//从输入获取URL
var URL=document.getElementById（'URL'）。值；
//获取所有链接
var links=document.querySelectorAll（'a'）；
//将节点列表转换为数组
var linksArr=Array.from（links）；
//将链接与数组进行比较
var compareArr=linksArr.includes（URL）；
警报（URL）；
警报（linksArr）；
警惕（比较耳环）；
如果（比较耳环===真）{
警报（“重复”）；
}
否则{
警报（“NoDuplicate”）；
}
};
预期结果将是用户在输入框中键入“”。然后comparear将返回true

如果他们输入的链接不在页面上，compareArr将返回false

实际结果是它总是返回false

我添加警报只是为了调试。

您需要在该数组中循环，以便将每个元素与数组进行比较。

失败的原因是，
array.from（document.querySelectorAll（'a'））
将为您提供一个节点列表数组，但它不会为您提供链接

您需要提取
href
值，然后进行比较，以实现您想要的

编辑：我对您的代码做了一些基本的更改，您可以验证它是否有效


网址：

0
函数grabLinks（）{
//从输入获取URL
var URL=document.getElementById（'URL'）。值；
//获取所有链接
var links=document.querySelectorAll（'a'）；
//将节点列表转换为数组
var linksArr=Array.from（links）；
//将链接与数组进行比较
const res=linksArr.filter（link=>link.href.includes（URL））；
如果（相对长度）{
警报（“重复”）；
}
否则{
警报（“NoDuplicate”）；
}
};
linksArr实际上仍然是一个对象数组。使用 抓住你想要的东西。在这种情况下，可能是href

更新代码：

//Convert Nodelist to array of objects
var linksArr = Array.from(links);

// Convert object array to string array
var newLinksArr = linksArr.map(nodeObject => nodeObject.href)

console.log(newLinksArr)
// ['http://www.test.com', 'https://stackoverflow.com', 'https://www.ford.com']
您的
linksArr
是一个s数组，您可以将其与
字符串进行比较。它们是不同的类型，所以它们永远不会匹配。您可以使用查找数组中的第一个匹配元素，或者如果您只想知道它是否存在于列表中，也可以使用



函数抓取链接（）{
var url=document.getElementById（'url'）。值；
var links=document.querySelectorAll（'a'）；
//将节点列表转换为数组
var linksArr=Array.from（links）；
//将链接与数组进行比较
var compareArr=linksArr.some（a=>a.href==url）；
如果（比较耳环===真）{
console.log（'Duplicate'）；
}否则{
console.log（'NoDuplicate'）；
}
};

URL:

0

当您使用


var links = document.querySelectorAll('a');


您正在链接中获取HtmleElements对象

因此，在转换为数组的过程中，您可以从这些HtmleElement对象中提取链接


var linksArr = Array.from(links).map(link => link.href);


linksArr中的链接也会有一个尾随“/”。所以在比较中使用耳环


var compareArr = linksArr.includes(URL + "/");



或者，无论何时使用
.includes（）
都可以从linksArr中的所有链接中删除此尾随“/”，然后确保数组的格式为


const array = [1, 2, 3];
console.log(array.includes(1); // true


在上述情况下，您将得到
true

如果您的数组是这样的对象形式


const array = [{ id:1 }, { id:2 }];
console.log(array.includes(1); // false



然后
.includes（）
不起作用，总是给你
false
。因此，请确保您使用的是哪种数组格式，并根据您的要求对其应用适当的方法。
您需要从NodeList对象links中的每个节点获取href

使用forEach迭代链接并创建一个href数组

下面的解决方案效果很好


<!DOCTYPE html>
    <html>
    <head>

    </head>
<body>


URL: <input id="URL" type="text" name="URL"><br>
<input onClick="grabLinks()" type="submit" value="Submit">
<div id="dupliURLNum">0</div>

<script>

function grabLinks() {

    //Get URL from input
    var URL = document.getElementById('URL').value;

    //Get all links
    var links = document.querySelectorAll('a');
    //Convert Nodelist to Array
    var linksArr = [];
    links.forEach(node => linksArr.push(node.href))


    //Compare Link to Array
    var compareArr = linksArr.includes(URL);


    alert(URL);
    alert(linksArr);
    alert(compareArr);    

        if (compareArr === true) {
            alert('Duplicate');
        }
        else {
            alert('NoDuplicate');
        }

};

</script>

<a href="http://www.test.com">test</a>
<a href="https://stackoverflow.com">stackoverflow</a>
<a href="https://www.ford.com">ford</a>

</body>
</html>




网址：

0
函数grabLinks（）{
//从输入获取URL
var URL=document.getElementById（'URL'）。值；
//获取所有链接
var links=document.querySelectorAll（'a'）；
//将节点列表转换为数组
var linksArr=[]；
links.forEach（node=>linksArr.push（node.href））
//将链接与数组进行比较
var compareArr=linksArr.includes（URL）；
警报（URL）；
警报（linksArr）；
警惕（比较耳环）；
如果（比较耳环===真）{
警报（“重复”）；
}
否则{
警报（“NoDuplicate”）；
}
};

您确定
var linksArr=Array.from（links）
将所有
a
元素转换为准备好进行比较的URL？a
htmlinklement
不是
字符串！它们永远不可能是
=
（这是
Array#包括的
所做的比较）。最好做
linksArr.some（a=>a.href==URL）这就是
数组。原型。包含
的功能。不，不是。Array.includes将仅验证数组中是否存在直接值。在这种情况下，它不是！完美的我知道我一定没有正确地获取HREF。我还添加了var compareArr=linksArr.includes（URL+“/”）；从Abitos post开始处理尾部/。谢谢大家@timothybeachboard很高兴提供帮助，如果此答案解决了您的问题，请单击答案旁边的复选标记将其标记为已接受。请看：接受答案是如何工作的？更多信息。再次感谢您！这是我第一次发帖。=）

<!DOCTYPE html>
    <html>
    <head>

    </head>
<body>


URL: <input id="URL" type="text" name="URL"><br>
<input onClick="grabLinks()" type="submit" value="Submit">
<div id="dupliURLNum">0</div>

<script>

function grabLinks() {

    //Get URL from input
    var URL = document.getElementById('URL').value;

    //Get all links
    var links = document.querySelectorAll('a');
    //Convert Nodelist to Array
    var linksArr = [];
    links.forEach(node => linksArr.push(node.href))


    //Compare Link to Array
    var compareArr = linksArr.includes(URL);


    alert(URL);
    alert(linksArr);
    alert(compareArr);    

        if (compareArr === true) {
            alert('Duplicate');
        }
        else {
            alert('NoDuplicate');
        }

};

</script>

<a href="http://www.test.com">test</a>
<a href="https://stackoverflow.com">stackoverflow</a>
<a href="https://www.ford.com">ford</a>

</body>
</html>