Заменить значения в тэгах по шаблону (DOM, JS)

    window.onload = function () {
        let lis = document.getElementsByTagName('li'); // Получаем все элементы с тегом li

        for(let i=0;i<lis.length;i++){ // Преебираем их
            let style = lis[i].className.split(' '); // Получаем название класса и разбиваем по пробелму
            let id = lis[i].dataset.testId; // Получаем id из data аттрибута
            lis[i].innerText = id+' '+style[1]; // Добавляем в текст id и название цвета класса.
        }
    }

    .green{
        color: green;
    }
    .red{
        color: red;
    }
    .blue{
        color: blue;
    }
    .yellow{
        color: yellow;
    }
    .black{
        color: black;
    }

<ul>
    <li class="list-item green" data-test-id="1"></li>
    <li class="list-item red" data-test-id="2"></li>
    <li class="list-item blue" data-test-id="3"></li>
    <li class="list-item yellow" data-test-id="4"></li>
    <li class="list-item black" data-test-id="5"></li>
</ul>

Array.from(document.querySelectorAll('li'))
  .forEach((li) => { li.textContent = `${li.dataset.testId} ${li.textContent}`; });

<li class="list-item green" data-test-id="1">green</li> 
<li class="list-item green" data-test-id="2">green</li>