Question

我正在尝试创建一个功能-

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

似乎我可以从输入框中获取值，并将链接转换为数组。但是，即使我匹配了值（例如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。

我已添加警报仅出于调试目的。

Answer 1

失败的原因是，Array.from(document.querySelectorAll('a'))将为您提供一个nodeList数组，但不会为您提供链接！

您需要提取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>

Answer 2

您需要遍历该数组以与数组中的每个元素进行比较

Answer 3

linksArr实际上仍然是一个对象数组。采用 Map抓住您想要的物体。在这种情况下，可能是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']

Answer 4

您的linksArr是HTMLAnchorElement的数组，您正在与String进行比较。它们是不同的类型，因此它们将永远不匹配。您可以使用Array.prototype.find()查找数组中的第一个匹配元素，或者，如果您只想知道列表中是否存在，则使用Array.prototype.some()。

function grabLinks() {

  var url = document.getElementById('URL').value;

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

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

  //Compare Link to Array
  var compareArr = linksArr.some(a => a.href === url);
  
  if (compareArr === true) {
    console.log('Duplicate');
  } else {
    console.log('NoDuplicate');
  }

};

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

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

请记住，href并不总是您在href属性中输入的确切字符串。它是“ Is a USVString that reflects the href HTML attribute, containing a valid URL of a linked resource. ”。在这种情况下，您需要搜索URL https://stackoverflow.com/。没有斜线，它将找不到它。

Answer 5

使用

获取所有链接时

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

您正在链接中获取HTMLElements对象。

因此，在转换为数组期间，您可以从这些HTMLElement对象中提取链接

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

linksArr中的链接也将以“ /”结尾。因此，在compareArr中使用

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

或者您可以从linksArr中的所有链接中删除该尾随的“ /”

Answer 6

每当您使用.includes()时，请确保您使用以下形式的数组

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。因此，请确保您使用哪种数组格式，并根据您的要求对其应用适当的方法。

Answer 7

您需要从NodeList对象（链接）的每个节点中获取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>

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

7 个答案: