Javascript check if HTML contains an item from an array

Question

I have a list of potential html classes in my javascript file

var html_list = ["blogrss",
"btnrss",
"buttonsrssfeed",
"copypasteblocker",
"facebook128x128",
"feedicon",
"iconrss",
"instagram128x128",
"jobwidget",
"pinterest128x128",
"pushnotification",
"rss128x128"]

Upon visiting a webpage i would like to iterate the array and if the webpage contains one of the elements a simple alert will show which html element the page contains.

what are these strings supposed to be? Classes? Ids? - what have you tried? — zfrisch
– zfrisch, Commented Jun 20, 2018 at 19:29
Try google chrome extension TamperMonkey or FF extn GreaseMonkey and learn Userscripts to write in them — Vignesh Raja
– Vignesh Raja, Commented Jun 20, 2018 at 19:35
hi these are typical examples of spam html classes used in certain webpages — Clueless1889
– Clueless1889, Commented Jun 20, 2018 at 19:38

mwilson · Accepted Answer · 2018-06-20 19:39:07Z

1

You would need to run a script that basically iterates through your list and checks the DOM to see if there's a match. Keep in mind that a selector can be a tag, class, id, etc... In your list, all selectors would be treated as a tag selector so you would need to provide the right selector and the rest will fall into place (#id or .class-name or tagName):

( () => {
    const elements = [
  "blogrss",
  "btnrss",
  "buttonsrssfeed",
  "copypasteblocker",
  "facebook128x128",
  "feedicon",
  "iconrss",
  "instagram128x128",
  "jobwidget",
  "pinterest128x128",
  "pushnotification",
  "rss128x128"
  ];
  const matchedElements = [];
  elements.forEach( (el) => {
    const match = document.querySelectorAll(el);
    if (match && match.length > 0) {
        matchedElements.push({ elementName: el, matches: match.length });
    }
  });
  alert(`Found ${matchedElements.length}`);
  console.log(matchedElements); // More detailed view of the matches
})();

answered Jun 20, 2018 at 19:39

mwilson

13.1k10 gold badges65 silver badges103 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Clueless1889 Over a year ago

thank you. These are examples of class names. Your solution looks good.

Clueless1889 Over a year ago

is there anyway to return to the name of the found element. Currently only found[Object object] is displayed?

mwilson Over a year ago

You'll have to update your code and provide a JS Fiddle. The above code will display the element name since the array is an array of strings

L0uis · Accepted Answer · 2018-06-20 19:32:13Z

0

You can have a look at the jquery all selector https://api.jquery.com/all-selector/

answered Jun 20, 2018 at 19:32

L0uis

7295 silver badges9 bronze badges

Comments

Scooby-Doo · Accepted Answer · 2018-06-20 19:36:50Z

0

You can use Cheerio: https://www.npmjs.com/package/cheerio

More specifically, check out the traversing section: https://www.npmjs.com/package/cheerio#traversing

answered Jun 20, 2018 at 19:36

Scooby-Doo

811 gold badge1 silver badge14 bronze badges

Comments

zfrisch · Accepted Answer · 2018-06-20 19:54:42Z

you can use document.getElementsByTagName("*") to get all the elements, then simply use classList and some array method to determine if any elements have the class.

In the below function the searchForClasses function will return true or false depending on if there's a match.

var html_list = [
  "testClass"
],
second_html_list = [
"banana"
]


function searchForClasses(classArray) {
  let class_included = false,
    elements = Array.from(document.getElementsByTagName("*"));
  for (let _class of classArray) {
    class_included = elements.some(ele => ele.classList.contains(_class));
    if (class_included) break;
  }
  return class_included;
}

console.log(searchForClasses(second_html_list)); // false
console.log(searchForClasses(html_list)); // true

<div class="testClass"></div>

Collectives™ on Stack Overflow

Javascript check if HTML contains an item from an array

4 Answers 4

3 Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

3 Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related