Как обернуть каждое слово в строке в span, оставляя при этом на месте br?

Question

[Дима Паутов]

Доброе утро!
У меня задача, обернуть каждое слово в строке в span.

<div class="mainSlideContent">
					Мы подключим все возможные каналы<br>
					для продвижения Вашего сайта
				</div>

Моя реализация

var mainSlideWordWrap = function(){
			var 
				i,
				mainSlideContent = $('.mainSlideContent');

			// Переберём все блоки контента и обернём слова в span
			mainSlideContent.each(function(index, el) {
				var 
					slide = $(this),									// Текущий слайд
					slideText = $(this).text().trim().split(' '),		// Массив слов каждого слайда
					slideTextLength = slideText.length;					// Длина каждого массива

				// Пройдёмся по каждому слову и обернём его в span
				for (i = 0; i <= slideTextLength; i++) {
					console.log('<span class="mainSlideWordWrap">'+ slideText[i] + '</span>');
				}
			});
		};

Но вот, чет я не заметил, что у меня же есть в строке br и он же еще и заносится в массив. Как сделать, что бы не вносить его в массив, да и еще при обёртке слов span оставить его на месте?

Должно стать, как я думаю вы догадались так:

<div class="mainSlideContent">
<span>Мы</span>
<span>подключим</span>
<span>все</span>
<span>возможные</span>
<span>каналы</span>
<br>
<span>для</span>
<span>продвижения</span>
<span>Вашего</span>
<span>сайта</span>
</div>

Вот готовый фиддл

Answer 1

[xtalen]

https://jsfiddle.net/a3eo68qo/5/

var mainSlideWordWrap = function() {
  // Переберём все блоки контента и обернём слова в span
  $('.mainSlideContent').each(function() {
    var result = $(this).html().replace(/[\wа-яё]+/gim, function(s) {
      return s === "br" ? s : "<span>" + s + "</span>"
    });
    
    console.log('<span class="mainSlideWordWrap">'+ result + '</span>');
  });
};

mainSlideWordWrap();

Comments

[Дима Паутов]

Огромное спс!

Answer 2

[Андрей]

Проверять содержимое slideText[i] и если там 'br' не оборачивать