如何找到匹配所有关键字的html元素?

How to find an html element that matches all keywords?

提问人:Georgy Martynovich 提问时间:8/23/2021 更新时间:8/23/2021 访问量:404

问:

我正在为自己编写一个类似机器人的 chrome 扩展程序,它的功能之一是解析特定 html 元素的随机站点,该元素包含用户以自定义顺序提供的所有关键字。我都做不到。.click()

我玩了一下jQuery的选择器,发现像我下面提供的命令只适用于预定义数量的关键字。:contains

至于问题。出于某种原因,它在我的情况下不起作用。这对我来说看起来很奇怪,因为同时“.remove()”工作得很好。.click()

这是我的“.js”文件,负责我试图实现的目标:

$(document).ready(function() {
    console.log('ready');
    findItem();
});

function findItem() {
    chrome.storage.local.get("settings", function (data) {
        //var newWindow = window.open('SOME SITE URL', 'single');

    if (data.settings.keyWords) {
        
        //code piece that makes an array out of keywords string
        //stored in chrome storage and removes empty elements
        let pkString = data.settings.keyWords;
        const pkArr = pkString.split(", ");
        Object.keys(pkArr).forEach(pk => {
            if (pkArr[pk] == "") {
                pkArr.pop();
                console.log('popped');
            } else {
                console.log(`'${pkArr[pk]}'`);
            }
        });

        if (pkArr) {
            //i basically need something like that but for random amount of keywords
            $(`div:contains("${pkArr[0]}"):contains("${pkArr[1]}"):contains("${pkArr[2]}"):contains("${pkArr[3]}"):contains( ... )`).click();
        }
    }
};
JavaScript jQuery HTML 解析

评论


答:

1赞 Chris 8/23/2021 #1

您可以映射到每个关键字并将其组合到单个选择器中,如下所示:

$(`div${pkArr.map(keyword => `:contains("${keyword}")`).join('')}`).click();

您可能还想检查 中是否至少有 1 个元素,否则它将匹配页面上的所有元素。pkArr<div/>

至于零件,这可能是由多种原因引起的。该元素不是正确的元素,或者它没有附加单击事件侦听器。不太确定,但浏览器也可以阻止它。click()

评论

0赞 Georgy Martynovich 8/23/2021
不,我的选择器是对的。我正在尝试找到与所有用户关键字匹配的确切元素。主要问题是制作一个可以采用自定义数量的关键字的搜索命令
0赞 Georgy Martynovich 8/23/2021
它似乎工作得很好,感谢日志,我想我会接受答案。您能简要解释一下您编写的选择器背后的逻辑吗?现在对我来说它看起来有点神秘。至于click()的事情。假设它不是浏览器,我不能尝试让它工作吗?
1赞 Chris 8/24/2021
你有一个带有关键字的数组。通过使用 ,关键字被组合到选择器字符串中。因此,现在每个 Array 元素都将包含 .最后,使用空字符串组合所有元素。这将连接所有元素,而没有任何分隔符。有关点击事件的详细信息,请查看此问题Array#map:contains(keyword)Array#join