Determine whether the elements within an array are present on the webpage. If they are, display an alert. If not, reload the page

Question

Determine whether the elements within an array are present on the webpage. If they are, display an alert. If not, reload the page

Initially, I had a userscript designed to search for a specific string within a webpage. If the script failed to locate the string, it would refresh the page after 4 seconds:

var item = 'apple';
if(document.body.innerHTML.toString().indexOf(item) > -1){
    setTimeout(function() {
        alert(item + " was found");
    }, 150);
}else{
    setTimeout(function()
               {
        location.reload(true);
    }, 4000);
}

The functionality of this code was flawless. However, I wanted to enhance it by enabling it to search for multiple items using an array:

var item = [
    'apple',
    'peach'
];
for (var i = 0; i < item.length; i++){
    if(document.body.innerHTML.toString().indexOf(item[i]) > -1){
        player.play();
        setTimeout(function() {
            var curitem = item[i];
            alert(item[i] + " was found");
        }, 200);
    }
}
//else{
//    setTimeout(function()
//               {
//        location.reload(true);
//    }, 4000);
//}

After implementing this multi-item search functionality, I encountered two challenges:

How can I modify the script to display the exact item from the array that has been found? Currently, the alert message displays as 'undefined was found', even though the script successfully identifies the items.
In case none of the items are found, how do I trigger a page refresh?

javascript jquery userscripts

Answer 1

Answer №1

When it comes to accomplishing this task, there are several methods one can use. Personally, I find that using regex is the most efficient approach as it provides more control and is generally faster than traditional looping techniques, especially when dealing with a large number of terms.

Take for example the following code snippet:

var items = [
    'apple',
    'peach'
];
var itmRegEx = new RegExp (`(${ items.join("|") })`);

var itmMtch  = document.body.innerHTML.match (itmRegEx);
if (itmMtch  &&  itmMtch.length) {
    //player.play();
    //setTimeout (alert, 200, itmMtch[1] + " was found");
    setTimeout (console.log, 200, itmMtch[1] + " was found");
}
else {
    console.log ("Reloading...");
    //setTimeout ( () => {location.reload (true);}, 4000);
}

Key points to consider:

toString() method is not required in this scenario.
Regex offers extensive capabilities such as matching expressions like 'apple\\b', which specifically targets "apple" without including "apples".
Exercise caution when using innerHTML as it may match unintended elements like
```
<a href="virusserver.net/badapple">free!</a>
```
. To avoid this, utilize textContent if the desired content is visible on the page.
Take note of the updated version of the setTimeout() function used in the script.
Target specific nodes of interest by class or id instead of casting a broad net with document.body to enhance performance.
Special care is needed when working with location.reload as the parameterized form of setTimeout() may lead to an "Illegal invocation" error.

Answer 2

When it comes to accomplishing this task, there are several methods one can use. Personally, I find that using regex is the most efficient approach as it provides more control and is generally faster than traditional looping techniques, especially when dealing with a large number of terms.

Take for example the following code snippet:

var items = [
    'apple',
    'peach'
];
var itmRegEx = new RegExp (`(${ items.join("|") })`);

var itmMtch  = document.body.innerHTML.match (itmRegEx);
if (itmMtch  &&  itmMtch.length) {
    //player.play();
    //setTimeout (alert, 200, itmMtch[1] + " was found");
    setTimeout (console.log, 200, itmMtch[1] + " was found");
}
else {
    console.log ("Reloading...");
    //setTimeout ( () => {location.reload (true);}, 4000);
}

Key points to consider:

toString() method is not required in this scenario.
Regex offers extensive capabilities such as matching expressions like 'apple\\b', which specifically targets "apple" without including "apples".
Exercise caution when using innerHTML as it may match unintended elements like
```
<a href="virusserver.net/badapple">free!</a>
```
. To avoid this, utilize textContent if the desired content is visible on the page.
Take note of the updated version of the setTimeout() function used in the script.
Target specific nodes of interest by class or id instead of casting a broad net with document.body to enhance performance.
Special care is needed when working with location.reload as the parameterized form of setTimeout() may lead to an "Illegal invocation" error.

Answer 3

Answer №2

This script is designed to locate the first instance of a specific item within an array. The content div identifier is crucial in this example as the script is embedded within the body of the snippet.

var fruits = [
    'apple',
    'peach'
];

// Creating a regular expression pattern using the array items
var fruitPattern = new RegExp(fruits.join("|"));
var searchResult = document.getElementById("content").innerHTML.toString().match(fruitPattern);

if (searchResult) {
  //player.play();
  setTimeout(function() {
    alert(searchResult.toString() + " was found");
  }, 200);
} else {
  setTimeout(function() {
    location.reload(true);
  }, 4000);
}

<div id="content">gfg</div>

Answer 4

This script is designed to locate the first instance of a specific item within an array. The content div identifier is crucial in this example as the script is embedded within the body of the snippet.

var fruits = [
    'apple',
    'peach'
];

// Creating a regular expression pattern using the array items
var fruitPattern = new RegExp(fruits.join("|"));
var searchResult = document.getElementById("content").innerHTML.toString().match(fruitPattern);

if (searchResult) {
  //player.play();
  setTimeout(function() {
    alert(searchResult.toString() + " was found");
  }, 200);
} else {
  setTimeout(function() {
    location.reload(true);
  }, 4000);
}

<div id="content">gfg</div>

Determine whether the elements within an array are present on the webpage. If they are, display an alert. If not, reload the page

Answer №1

Answer №2

Similar questions

Executing multiple HTTP requests simultaneously in groups using an asynchronous for loop for each individual request

Benefits of using props destructuring in React - beyond just being a syntactic shortcut

Relocate the bxslider carousel to the specific div clicked on

AngularJS does not allow access to the variable value outside of the resource service's scope,

What yields greater performance in MongoDB: employing multiple indexes or creating multiple collections?

What is the best way to track the loading progress of an AJAX page in WordPress?

Avoiding the opening of a select menu

Using Vue to alter data through mutations

"Error encountered when attempting to execute the delete() function in Django

Exploring the integration of methods in Vue.js components

What are the steps to decode a JSON response using jQuery?

JavaScript keydown event for rotating images

AngularJS, sort through "afoo" excluding "foo"

Implementing the fetch API with radio buttons in a React Native application

Frequent execution of jQuery Ajax requests is evident

AngularJS experiencing issues with Bootstrap multiselect functionality

The Javascript calculation function fails to execute proper calculations

Tips for transferring data to the next page with JavaScript AJAX

Utilize jQuery to run a script once everything is prepared and loaded

Obtaining a value using the Node.js inquirer package