How to find an html element that matches all keywords?

Question

I'm writing a bot-like chrome extension for myself and one of it's functions is to parse a random site for a specific html element that contains all keywords provided by user in custom order and .click() it. I can't do neither of those.

I played around with jQuery's :contains selector a bit and found out that commands like the one i provided below only work for a predefined amount of keywords.

As for .click() problem. For some reason it does not work in my case. This looks strange to me because at the same time '.remove()' works perfectly fine.

Here is my '.js' file responsible for what i'm trying to achieve:

$(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();
        }
    }
};

Chris · Accepted Answer · 2021-08-23T15:25:41.210

1

You can map over each keyword and compose this into a single selector like so:

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

You probably also want to check if there is at least 1 element in the pkArr, otherwise, it will match all <div/> elements on the page.

As for the click() part, this can be caused by multiple reasons. Either the element is not the correct element or it doesn't have a click event listener attached. Not really sure, but it could also be prevented by the browser.

edited Aug 23 '21 at 15:25

answered Aug 23 '21 at 15:14

Chris

6,331
1
21
25

No, my selector is right. I'm trying to find the exact element that matches all of user's keywords. The main problem is to make a search command that can take custom amount of keywords – Georgy Martynovich Aug 23 '21 at 15:18
It seems to work perfectly fine, thanks a log, think i'll accept the answer. Can you please briefly explain the logic behind the selector you wrote ? Now it looks a bit cryptic to me. And as for click() thing. Assuming it is not the browser, what cant i try to make it work? – Georgy Martynovich Aug 23 '21 at 15:39
1

You have an Array with the keywords. By using `Array#map`, the keywords are being composed to a selector string. So each Array element now will contain `:contains(keyword)`. Finally, all elements are combined using `Array#join` using an empty string. This concatenates all elements without any delimiter. For more information about click events, look at this [question](https://stackoverflow.com/questions/2381572/how-can-i-trigger-a-javascript-event-click). – Chris Aug 24 '21 at 07:13

How to find an html element that matches all keywords?

1 Answers1