我正在尝试创建一个函数——
抓取页面上的所有链接,将这些链接与用户输入的链接进行比较,并检查该链接是否已存在于页面上
看来我可以从输入框中获取值,并将链接转换为数组。但是,即使我匹配值(例如 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/