Как автоматически (стилями, скриптом) задавать цвет только для цифр в статье?

Question

[Владимир]

У меня сайт на Wordpress. Скажите, можно ли как-то реализовать (стилями или скриптом), чтобы цифры (именно только цифры) в статье автоматически окрашивались в заданный мною цвет? То есть, изменить основной цвет не всего текста, а только цифр, а при необходимости чтобы я мог бы поменять цвет отдельных цифр на другой, отличный от основного.
Возможно ли так сделать, и как?

Answer 1

[Максим Морев]

Здравствуйте!
Вешайте фильтр на the_content, в фильтре с помощью регулярки заворачивайте цифры в span с нужным классом, в CSS классу задавайте стилизацию.

(не проверял, но скорее всего всё верно).

add_filter('the_content', function($content) {
  return preg_replace('~(\d+)~', '<span class="colored">$1</span>', $content);
});

.colored {
  color: red;
}

Приведённый код завернёт все натуральные числа, в том числе в составе других строк - это редко то, что нужно, но тут уж вам виднее, как будет правильно, редактируйте регулярку под свои задачи.
Если какие-то отдельные кейсы есть - то смотрите в сторону preg_replace_callback - там можно будет проверить вхождения чего-то конкретного и решать, что с этим делать.

Comments

[Владимир]

Проверил. Окрашивает и буквы тоже в тексте до конца абзаца. Плюс ломает некоторые ссылки. (((

[Максим Морев]

Владимир, тег незакрытый был. Отредактировал пример, проверил - работает.

[Владимир]

Максим Морев, всё равно ломает ссылки и теги, в теле которых есть цифры: , , ссылки на канал ютуба.

[Максим Морев]

Владимир, тьфу, что-то мне в голову не пришло, что цифры в HTML не только в тексте :))
Тогда на серверной стороне лучше не делать (совершенно дикая регулярка получится, если получится вообще).
Проще на JS тогда что-то в духе:

const r = new RegExp("(\\d+)", "g");
document.querySelectorAll('.js-content *').forEach(el => {
  el.innerHTML = el.innerHTML.replace(r, '<span class="colored">$1</span>');
});

[Владимир]

Максим Морев, что-то у меня косые руки(( Не подскажете, как это подключить?)

[Максим Морев]

Владимир, добавляете вашей контентной части класс js-content, или оборачиваете в лишнюю обёртку:

<div class="js-content">
  <?php the_content(); ?>
</div>

Дальше куда-нибудь перед </body> вставляете вышеприведённый код, обернув его тегами <script>

[Владимир]

Максим Морев, Спасибо, получилось. Но всё равно ломает ссылки с цифрами, в т.ч. и картинки((( Теги норм.