Блог

Берем любой элемент, к примеру <h1> и задаем ему id="#title".

HTML

<h1 id="title">
  Угол «ревю». Как менялся дизайн Авторевю за последние 30 лет, 
  и почему логотип первого номера был синим
</h1>
<p id="count"></p>

JQ

var value = $('#title').text();

var regex = /\s+/gi;
var wordCount = value.trim().split(regex).length;

// Массив допустимых значений количества слов
var allowedCounts = [2, 6, 10, 14, 18];

if (allowedCounts.includes(wordCount)) {
  $('h1').addClass('_' + wordCount);
}

О чем этот код?

var value = $('#title').text();
$('#title') выбирает HTML-элемент с идентификатором title.

.text() — метод, который извлекает текстовое содержимое выбранного элемента. Если выбранный элемент содержит другие HTML-элементы, их текстовое содержимое будет сконкатенировано.

Результат, который является текстовым содержимым элемента с идентификатором title, присваивается переменной value.

var regex = /\s+/gi;
Эта строка определяет шаблон регулярного выражения и присваивает его переменной regex.

Шаблон /\s+/gi предназначен для поиска одного или более (+) пробельных символов (\s). Пробельные символы включают пробелы, табуляции, переносы строк и т.д.

Флаг g означает глобальный, что означает поиск шаблона по всей строке.

Флаг i означает без учета регистра.

var wordCount = value.trim().split(regex).length;
value.trim() удаляет любые начальные или конечные пробелы из строки value. Это важно для того, чтобы подсчет слов не включал пустые строки, возникающие из-за пробелов в начале или в конце содержимого.

.split(regex) разделяет обрезанную строку на массив подстрок, используя регулярное выражение regex в качестве разделителя. Поскольку regex соответствует одному или более последовательным пробельным символам, эта операция эффективно разделяет строку на слова, предполагая, что слова в тексте разделены пробелами.

.length — это свойство, которое возвращает количество элементов в массиве, полученном в результате метода .split(). В данном контексте оно представляет количество слов в строке value, поэтому его присваивают переменной wordCount.

Остальной код сначала обновляет элемент с ID count, показывая количество слов в заголовке. Затем он проверяет, содержится ли wordCount в массиве allowedCounts, который содержит допустимые значения количества слов, для которых нужно добавить классы. Если wordCount содержится в массиве, к элементу h1 добавляется класс, имя которого формируется динамически из _ и значения wordCount.

SCSS

html, body {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

h1 {
  color: balck;
  font-family: Verdana;
  font-size: 30px;
  padding: 0 40px;
  
  &._2 {
    font-size: 60px;
  }
  
  &._6 {
    font-size: 55px;
  }
  
  &._10 {
    font-size: 50px;
  }
  
  &._14 {
    font-size: 45px;
  }
  
  &._18 {
    font-size: 40px;
  }
}

p {
  color: gray;
  font: 18px/18px 'Verdana'
}

Накидываем стили, для каждого размера заголовка.

Демонстрация