Как с помощью скрипта добавить класс первому слову в абзаце?

Question

<p>Спорт приносит большую радость. Люди ходят в секции, посещают спорт – клубы, играют в спортивные игры, закаляются и общаются с новыми людьми. Спортивные командные игры приносят радость победы.</p>

Answer 1

Если абзац начинается с целого слова (не с предлога или вводного), то достаточно простого регулярного выражения:

let p = document.querySelector('p');
p.innerHTML = p.innerText.replace(/^([а-я]+)/gi, '<span class="first">$1</span>');

.first {color: red;}

<p>Спорт приносит большую радость. Люди ходят в секции, посещают спорт – клубы, играют в спортивные игры, закаляются и общаются с новыми людьми. Спортивные командные игры приносят радость победы.</p>

Answer 2

Есть вот такой интересный вариант на jQuery.

Выделяем первое слово в абзаце:

$("#first").html(function() {
  var text = $(this).text().trim().split(" ");
  var first = text.shift();
  return (text.length > 0 ? "<span class='active'>" + first + "</span> " : first) + text.join(" ");
});

.active {color: red; font-weight: bold;}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<p id="first">Спорт приносит большую радость. Люди ходят в секции, посещают спорт – клубы, играют в спортивные игры, закаляются и общаются с новыми людьми. Спортивные командные игры приносят радость победы.</p>

Выделяем последнее слово в абзаце:

$("#last").html(function() {
  var text = $(this).text().trim().split(" ");
  var last = text.pop();
  return text.join(" ") + (text.length > 0 ? " <span class='active'>" + last + "</span>" : last);
});

.active {color: red; font-weight: bold;}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<p id="last">Спорт приносит большую радость. Люди ходят в секции, посещают спорт – клубы, играют в спортивные игры, закаляются и общаются с новыми людьми. Спортивные командные игры приносят радость победы.</p>

БЛОГ НА HUSL

Как с помощью скрипта добавить класс первому слову в абзаце?

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