Как выделить div цветом в зависимости от содержимого?

Question

[Veresk17]

Есть html-код:

<div class ="group">Иванов Иван</div>
<div class ="group">Петров Петя</div>
...
<div class ="group">Сидоров Семен</div>

Нужно найти в нем определенные строки и выделить их цветом. Всего групп, которые нужно найти, две.

Я так пытаюсь:

const students = ["Иванов Иван", "Петров Петя"]; // первая группа
const prepods = ["Сидоров Семен"]; // вторая группа

var colorArray = document.getElementsByClassName('group'); // массив всех div-ов

// А дальше каша какая-то получается и код не работает

for (i = 0, len = colorArray.length; i < len; ++i) {
var txt = colorArray[i].textContent || colorArray[i].innerText; //  текст из div
for (j = 0, jlen = students.length; j < len; ++j) {   // ищу переменные из первой группы
if (students[j].includes(txt)) {
colorArray[i].style.backgroundColor = '#AA0000'; // тут пытаюсь выделить цветом
}
}
for (j = 0, jlen = prepods.length; j < len; ++j) { // ищу переменные из второй группы
if (prepods[j].includes(txt)) {
colorArray[i].style.backgroundColor = '#00ff00'; // тут пытаюсь выделить другим цветом
}
} 
}

Comments

[Антон Антон]

правильнее всего это делать в момент генерации html

Answer 1

[Александр]

document.querySelectorAll('.group').forEach((group) => {
    const text = group.textContent.trim();
    if (students.includes(text)) {
        group.style.setProperty('background-color', '#AA0000');
    }
    if (prepods.includes(text)) {
        group.style.setProperty('background-color', '#00FF00');
    }
});

Comments

[Veresk17]

Боже, как все просто. Спасибо!