Взять каждую дробь в тексте в span

Question

Дан абзац, содержащий текст со словами и с дробями вида 1/2. Дана также кнопка. По клику на кнопку возьмите каждую дробь в свой тег span. В коде ниже я смог обернуть каждый элемент в span, но с оборачиванием простых дробей у меня беда. Пытался и через регулярку (так как в массиве строковые значния), и проверить слова через includes, но выходило не то что нужно)

let p = document.querySelector("p");
let res = [];
document.querySelector("button").addEventListener("click", function() {
  let arr = p.innerText.split(" ").forEach((word) => { //делаю перебор всех элементов массива
    let elem = document.createElement("span"); // создаю span
    elem.innerText = word; // добавляю в span слова 
    res.push(elem.outerHTML);
    // отправляю все слова со span в массив
  });
  p.innerHTML = res.join(" ");
  // заменяю исходный текст текстом в span элементах
});

<p>
  Lorem 1/2 ipsum dolor sit amet, 2/4 consectetur adipisicing elit. 3/6 Pariatur enim 4/8 omnis non blanditiis, dolore illo ullam labore autem sit. Illum beatae dolores ipsam blanditiis excepturi reiciendis quibusdam necessitatibus error atque.
</p>
<button>Press me</button> <br />

Answer 1

Что-то многовато у Вас кода... Есть подозрение, что можно сделать проще, если допускаются регулярные выражения, и нет другой разметки в тексте:

let p = document.querySelector('p');
document.querySelector('button').addEventListener('click', function() {
  p.innerHTML = p.textContent.replace(/\d+\/\d+/g, '<span class="fract">$&</span>')
});

.fract { color: red; }

<p>
  Lorem 1/2 ipsum dolor sit amet, 2/4 consectetur adipisicing elit. 3/6 Pariatur enim 4/8 omnis non blanditiis, dolore illo ullam labore autem sit. Illum beatae dolores ipsam blanditiis excepturi reiciendis quibusdam necessitatibus error atque.
</p>
<button>Press me</button>

БЛОГ НА HUSL

Взять каждую дробь в тексте в span

Ответы (1 шт):