Изменить цветное слово каждой строки с помощью CSS или jQuery

Question

Im пытается настроить первое слово каждой строки, чтобы изменить цвет только на первое слово на нем. Сейчас это заполняется textarea на бэкэнд.

<div class="items"> 
67 small businesses has worked with us since the beginning of time 
<br> 
<br>3:1 ratio of apple products to humans 
<br> 
<br>2400 hours clocked in 2012 
<br> 
<br>13.7 number of times “So what exactly do you do?” is asked weekly 
<br> 
<br>1628 number of Starbucks K Cups consumed 
<br> 
<br>32 collective years of creative experience<br></div> 

, что я пытаюсь сделать это поставить перед каждым первым словом в <span> используя jQuery или что-то вроде этого:

<div class="items"> 
    <span class="color">67</span> small businesses has worked with us since the beginning of time 
    <br> 
    <br><span class="color">3:1</span> ratio of apple products to humans 
</div> 

помощь будет весьма признателен!

Answer 1

раскол на прорывах, и добавить пядь вокруг первого слова с словом mathcing регулярным выражением (или новой строкой):

$('.items').html(function(_,html) { 
    var lines = html.split(/<br\s*[\/]?>/gi); 
    for (var i=lines.length; i--;) { 
     lines[i] = $.trim(lines[i]).replace(/^(\w+)/, '<span class="red">$1</span>') 
    } 
    return lines.join('<br>'); 
}); 

FIDDLE

Answer 2

попробовать что-то вроде этого в цикле:

var firstWord = $(this).text().split(" ")[0]; 
var newText = $(this).text().replace(firstWord, "<span class='color'>"+firstWord +"</span>"); 
$(this).html(newText);