Добрый день, решил записать для себя небольшой сниппет для списков. Иногда бывает так что в элементе списка нужно часть текста выделить в жирное начертание, а часть оставить с тонки начертание.
Например такой текст будет выглядеть так:
Для того чтобы заполнить данный список из админки, без знаний HTML кода не обойтись, так как для реализации нужно числа обернуть в span и задать ему определённые стили.
- 84800 проданных изделий
- 102 сотрудника
- 5673 товара в каталоге
Таким образом код должен выглядеть вот так
<ul>
<li><span>84800</span> проданных изделий</li>
<li><span>102</span> сотрудника</li>
<li><span>5673</span> товара в каталоге</li>
</ul>Для этого решения я нашёл наиболее красивое решение. Мы будет оборачивать числа с помощью JavaScript (в моём случает это jQuery).
Пробегаемся по списку с помощью метода each, далее ищем в значение числа, с помощью регулярного выражения в методе replace() и оборачиваем их тегом span.
$("ul li").each(function() {
$(this).html($(this).text().replace(/([0-9.]+)/g, '<span>$1</span>'))
})
