How to check if an element classList contains a string or word partially?-CodePudding

I've got this code:

const all = document.querySelectorAll('div');
let variable = 'fruits';

all.forEach((item) => {
  if(item.classList.contains(variable)) {
   item.style.backgroundColor = 'red';
  }
});

<div >
  Fruits
</div>

<div >
  Green fruits
</div>

and I was wondering if theres to use classList.contains with a string/word partially?

Obviously what I'm trying to achieve is to get fruits-green styled too, since it contains fruits-green

I know there are CSS selectors for that, but given that my fruits variable will change with other JS functions, I'd like this to be vanilla JS too.

Any advice is much appreciated. Thanks!

CodePudding user response：

The classList property is a DOMTokenList which is a string but has methods and properties simular to Array methods.

Iterate through the array of tags (all). We'll use .flatMap() because we are dealing with multiple tags that may or may not have multiple matches.
```
all.flatMap((div, idx) => {//...
```
Next, we'll use the .value property of classList which returns a space delimited string of each of the tag's classes.
```
let list = div.classList.value.split(' ');
```
Then we'll .filter() each class of each tag by comparing with .includes()
```
list.filter(cls => cls.toLowerCase().includes('fruit'));
```

Finally, an array of arrays is returned. Each sub-array contains a tag's matching classes.

const all = Array.from(document.querySelectorAll('div'));

let output = all.flatMap((div, idx) => {
  let list = div.classList.value.split(' ');
  console.log(list)
  let matches = list.filter(cls => cls.toLowerCase().includes('fruit'));
  return [matches];
})

console.log(output);

<div >
  Fruits fries
</div>

<div >
  Green fruits fruit
</div>

CodePudding user response：

I was able to make it work using

let variable = 'fruits';
const all = document.querySelectorAll('div[class*="' variable '"]');

all.forEach((item) => {
  item.style.backgroundColor = 'red';
});

<div >
  Fruits
</div>

<div >
  Green fruits
</div>

Thanks again @David