JavaScript array.includes 返回 false(比较来自链接数组的用户输入)

标签 javascript arrays

我正在尝试创建一个函数——

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

看来我可以从输入框中获取值,并将链接转换为数组。但是,即使我匹配值(例如 http://www.test.com/ ),.includes 函数仍会返回 false。

我试过将数组转换为字符串。那行得通,但是它比较了所有内容,而不是特定链接。 (例如,即使我只是在输入框中输入“h”,它也会说存在重复链接。)

<!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 = Array.from(links);


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

预期的结果是用户在输入框中键入“http://www.test.com”。然后 compareArr 将返回 true。

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

实际结果是总是返回false。

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

最佳答案

它失败的原因是,Array.from(document.querySelectorAll('a')) 会给你一个节点列表数组,但它不会给你一个链接!

您需要提取 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 = Array.from(links);
  
    //Compare Link to Array
    const res = linksArr.filter(link => link.href.includes(URL));


        if (res.length) {
            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> 

关于JavaScript array.includes 返回 false(比较来自链接数组的用户输入),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/57648833/

相关文章:

Javascript 计算器在 Firefox 中不工作

javascript - 将文件直接从浏览器发送到 S3 但更改文件名

java - 对数组中的偶数和奇数进行排序

ios - 如何将新数据附加到现有的 JSON 数组 (swiftyJSON)

javascript - 使用javascript更改标签颜色的问题

javascript - 如何从嵌入的内容 Angular 4共享数据

javascript - 如何将数组数据绑定(bind)到选择选项

php - 如果选择了多个值,数组不会从 mysql 返回任何内容

arrays - 如何在Dart中访问多维数组/列表中的元素

c++ - 在 C++ 中没有类的情况下从 main() 访问函数内部的静态变量