Как выделить первое слово в блоке или строке при помощи CSS и jQuery

Предельно простой способ выделить первое слово в строке или текстовом блоке HTML, используя CSS и jQuery.

Что бы выделить, в принципе, любой кусочек в текстовой строке в HTML-разметке (букву, слово, фразу) можно воспользоваться тегом <span>. Достаточно просто обернуть требуемый участок текста этим тегом, а в таблице стилей CSS прописать необходимое форматироваие текста – вот собственно, и все. Например, HTML и CSS код для заголовка с выделенным первым словом будет выглядеть примерно так:

HTML

<h2><span>Текст</span> заголовка с выделением</h2>

CSS

h2 {color: darkgrey}
h2 span {color: red}

В результате для темно-серого заголовка первое слово будет выделено красным цветом. Таким образом можно задать совершенно любое формирование для заданного участка текста. Конечно, если такая необходимость возникает разово-эпизодически, то конструкцию <span>…</span> можно и ручками прописать, но если дело требует регулярного использования, например, во всех заголовках или элементах списка, то тут нужен способ как-то решить это автоматизированно-технически.

Для выделения первого символа или первого дочернего элемента в CSS существуют соответствующие псевдоклассы :firts-letter и :firts-child, а вот именно для выделения первого слова пока не внедрили, что-то наподобие :firts-word. И что же делать? — На выручку конечно же приходит jQuery!

Совсем коротенький java-скрипт можно прописать прямо в теле страницы или в отдельном js-файле, подключив через тег <script>

$(document).ready(function(){
 $("h2").each(function () {
  this.innerHTML = this.innerHTML.replace( /^(.+?)s/, "<span>$1</span> " );
 });
});

По сути скрипт, в каждом заданном элементе находит в начале строки последовательность символов, отделенную пробелом, и заменяет на саму себя с добавлением нужных нам тегов + пробел.

В результате работы скрипта, в каждом заголовке 2-го уровня H2 первое слово будет аккуратно автоматически обернуто тегом <span>…</span>. Можно комбинировать несколько селекторов в один с помощью запятой – jQuery выберет все элементы, которые соответствуют любому из селекторов, например, для применения ко всем заголовкам уровней с 1-го по 3-й вторая строчка будет выглядеть таким образом:

$("h1,h2,h3").each(function () {

Если вам требуется сделать выделение для повторяющихся элементов, например, конкретного отдельного списка, то в качестве селектора можно указать тег родительского элемента с заданным классом:

HTML

<ul class="f_word">
 <li>Перый элемент списка
 <li>Второй элемент списка
 <li>Третий элемент списка
</ul>

CSS

.f_word li span {
 color: red;
 font-weight: bold;
}

jQuery

…
$('.f_word li').each(function () {
…

В результате должен получится такой список, где первое слово будет иметь жирное начертание и красный цвет.

Реальный пример работы скрипта можно увидеть на одном из подготовленных наших сайтов.