(JS) Поиск текста в теге и его покраска.Либо поиск текста и дополнение своими тегами

Question

Заранее прошу простить нуба в JS. Так как знаю что вопрос должен быть очень простой.

Мне нужно по точному тексту в html, на чужом сайте, при помощи кода JS, найти текст и сделать одно из двух.

Просто поменять его цвет. ( Цвет в формате "#ff1188" ).
Добавить перед ним и после свой тег, что-бы потом за него зацепиться через CSS.

Код оригинала такой:

<div class="media-info-list__value text-capitalize">Заморожен</div>

Если брать второй вариант решения задачи, то привести код к такому виду.

<div class="media-info-list__value text-capitalize"><temp>Заморожен</temp></div>

А дальше я уже и сам смогу подцепиться через CSS. Вся проблема в том, что сайт на разных страницах, в тег div может быть как "Заморожен" так и "Продолжается". И мне нужно выделить "Заморожен" цветом.

Answer 1

// Находим нужные элементы
let elements = Array.from( document.body.querySelectorAll('*') ).filter( element => element.textContent.trim() === 'Заморожен' );

// Применяем к ним что угодно
elements.forEach( element => {
  element.style.color = 'red';
  element.classList.add('my-super-class');
  element.innerHTML = `<strong>${element.innerHTML}</strong>`;
});

<span>Что-то другое</span>
<div class="media-info-list__value text-capitalize">Заморожен</div>
просто слово Заморожен среди текста
<div>Что-то другое</div>

БЛОГ НА HUSL

(JS) Поиск текста в теге и его покраска.Либо поиск текста и дополнение своими тегами

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