Обернуть в span определенное слово

Question

Будьте добры подскажите, как с помощью чистого JS обернуть каждый "руб." в тег span (при условии что руб. имеется в данном блоке)?

<div class="container">
    <div class="value">3775 руб.</div>
    <div class="value">4775 руб.</div>
    <div class="value">5775 руб.</div>
    <div class="value">6775</div>
 </div>

.value {
  padding: 15px;
  font-size: 30px;
  font-weight: bold;
  border: 1px solid #000000
}

.value span {
  font-size: 16px;
  color: red;
}

Answer 1

Можно сделать так. Находим все элементы, проходим циклом, в цикле с помощью метода replace находим руб. и меняем, на span. Далее с помощью innerHTM заменяем на странице.

\.- для справки, экранирую точку, чтобы искалось как точка. Если не экранировать то точка воспринимается как любой символ

let text
let value = document.querySelectorAll('.value')
value.forEach(item => {
    text = item.textContent.replace(/руб\./, '<span>руб.</span>')
    item.innerHTML = text
})

.value {
  padding: 15px;
  font-size: 30px;
  font-weight: bold;
  border: 1px solid #000000
}

.value span {
  font-size: 16px;
  color: red;
}

<div class="container">
    <div class="value">3775 руб.</div>
    <div class="value">4775 руб.</div>
    <div class="value">5775 руб.</div>
    <div class="value">6775 руб.</div>
</div>

БЛОГ НА HUSL

Обернуть в span определенное слово

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