Перенос первого слова из одного div в другой?

Question

[3Create]

Хочется сделать как всегда красиво.. Так вот пришла мысль, а возможно ли с помощью скрипта сделать перенос первого слова из одного div- блока в другой div-блок, допустим просто первого слова...Изобразил на скрине:

Было так...
А такое хочется получить с помощью переноса в другой блок :

Причиной данной манипуляции считаю сокращение названия ...так как в каталоге очень не красиво смотрится длинное название с учетом категории товара, например : Зарядное устройство Liitokala Lii-260, нежели Liitokala Lii-260.
Если такое возможно, то подскажите каким образом :)
Я почти полный нуль в js. Суть вопроса в переносе данных из одного дива в другой, а не сокращении строки)))

Comments

[Dies Irae]

Первое слово можно конечно - с jQuery хотя-бы, а вот второй пример с "Зарядное устройство Liitokala Lii-260" уже тяжело. Целое словосочетание, которое непонятно как определять.

[alex]

а не проще просто из БД выводить название категории, нежели заниматься вот такой вот ерундистикой?

[Bhudh]

Dies Irae, если все категории названы по-русски (а марки — латиницей), можно просто матчить /^[а-яё ]+/i.

Answer 1

[Andrew]

Суть проблемы в чем?
У вас нет доступа к html?
Мне кажется, вам стоит стилизовать эти штуки не скриптом.
Ну-а вообще, можете пройтись регуляркой до первого пробела, и заменить на что-то типа
$1$2 -> <div class="other-class">$1</div>$2
Но опять же, у вас ведь смысловое разделение должно быть, те может быть и два слова и пробел не покатит

Comments

[3Create]

Хочется вытащить слово из одного дива и добавить в другой. Доступ есть .

[Andrew]

3Create,

let word = document.getElementById('maDiv').innerHTML,
      wordNew = word.replace(/(.+?)\s/,'<div class="other">$1</div>');
document.getElementById('maDiv').innerHTML = wordNew;

Если у вас много блоков - перебираете и для каждого делаете эту замену.
Стилизуйте .other как хотите

[3Create]

Andrew, Попробую, спасибо!

Answer 2

[азаза]

а ограничение по количеству символов сделать не?