如果锚文本包含关键字，则自动单击链接

Question

我正在寻找一个纯粹的Javascript实现。

在页面加载时，如果关键字是锚文本的一部分，我想自动单击链接。

<a href="#"> The Dog Barks </a>
<a href="#"> The Duck Quacks </a>
<a href="#"> The Bird Chirps </a>

我想自动单击带有鸭子一词的链接。

Answer 1

您可以获取文本，然后调用String.includes以检查关键字是否存在。

document.addEventListener("DOMContentLoaded", function() {
Array.from(document.querySelectorAll('a')).forEach(function(node) {
node.addEventListener("click", function() {
console.log(this.text);
});
});
function matchKeywordsAgainstLinkText(keyword) {
Array.from(document.querySelectorAll('a')).forEach(function(node) {
if (node.text.trim().includes(keyword)) {
node.click()
}
});
}
matchKeywordsAgainstLinkText('Duck');
});

<a href="#"> The Dog Barks </a>
<a href="#"> The Duck Quacks </a>
<a href="#"> The Bird Chirps </a>

我使用的方法链接：

querySelectorAll：一个静态(非实时(节点列表，表示与指定的选择器组匹配的文档元素列表。

Array.from((： 方法从类似数组的对象创建一个新的、浅拷贝的 Array 实例，在本例中返回值document.querySelectorAll('a')。

使用循环forEach我们迭代所有匹配的元素，并获取每个匹配的锚链接的文本，并比较关键字是否作为文本中的子字符串存在。如果匹配，我们会调用click()来模拟鼠标单击事件。

要执行不区分大小写的搜索，请使用test方法。

function matchKeywordsAgainstLinkText(keyword) {
var regex = new RegExp(keyword, 'i')
Array.from(document.querySelectorAll('a')).forEach(function(node) {
if (regex.test(node.text.trim())) {
node.click()
}
});
}