JSFiddle - React, Tailwind, and code Playground

by Sergei Sokolov

HTML

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
<ul>
  <li><a href="#"></a>Элемент списка1</li>
  <li><a href="#"></a>Элемент списка2</li>
  <li><a href="#"></a>Test Элемент списка3</li>
  <li><a href="#"></a>Элемент списка4</li>
  <li><a href="#"></a>Элемент списка5</li>
  <li><a href="#"></a>Элемент списка6</li>
  <li><a href="#"></a>Элемент списка7</li>
  <li><a href="#"></a>Deploy Элемент списка8</li>
  <li><a href="#"></a>Элемент списка9</li>
  <li><a href="#"></a>Элемент списка10</li>
</ul>

JavaScript

/**
 * для вопроса https://toster.ru/q/571908
 * Как грамотно подойти к решению этой простой, но интересной задачи для начинающих?
 */
function process(ul) {
  [].forEach.call(ul.children, li => {
    [].forEach.call(li.childNodes, node => {
      if (node.nodeType !== Node.TEXT_NODE) return;
      let text = node.textContent;
      if (!text.length) return;
      const words = text.split(/\s+/);
      words.forEach((w, i) => {
        if (w !== "Test" && w !== "Deploy") {
          words[i] = w.toLowerCase();
          if (i === 0) words.unshift("Тестировать");
        }
      });
      node.textContent = words.join(" ");
    });
  });
}

process(document.querySelector('ul'));