Change color first word of each line with CSS or jQuery

Question

Im trying to target the first word of each line to change the color to only the first word on it. Right now this is being populated by a textarea on the backend.

Answer 1

Try something like this in a loop:

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

Answer 2

split on breaks (or newlines ?), and add a span around the first word with a word mathcing regex :

$('.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