Выделить первое слово в заголовке

Несколько jQuery сниппетов, с помощью которых можно выделить первое слово в заголовке. Таким образом к заголовку добавится span контейнер, для которого нужно прописать соответствующие CSS правила.

$(document).ready(function()
{

    $('.header-logo, h1').each(function() {
        var h = $(this).html();
        var index = h.indexOf(' ');
        if(index == -1) {
            index = h.length;
        }
        $(this).html('<span style="color:red;">' + h.substring(0, index) + '</span>' + h.substring(index, h.length));
    });

});

или:

HTML:

<h1>
<span id="fav" class="btn-fav"><a href="#">Add to fav</a></span><span class="the-title">Title text goes here</span>
</h1>

jQuery:

$('h1 .the-title').html(function(i, html){
   return html.replace(/(\w+\s)/, '<span class="black">$1</span>')
})

$('.header-logo, h1').each(function() {
    var $this = $(this), $title = $this.find('.the-title');
    if ($title.length) {
        $title.html(function(i,h) {
            return h.replace(/(\w+\s)/, '<span class="black">$1</span>')
        })
    } else {
        $this.html(function(i,h) {
            return h.replace(/(\w+\s)/, '<span class="black">$1</span>')
        })
    }
});

CSS:

.black { color: red}

или:

jQuery:

$(document).ready ( function(){
$('h1').each(function() {
   var html = $(this).html();
   var word = html .substr(0, html.indexOf(" "));
   var rest = html .substr(html.indexOf(" "));
   $(this).html(rest).prepend($("<span/>").html(word).addClass("em"));
});
});

CSS:

span.em { color:red; }

или:

jQuery:

$(document).ready ( function(){
$('h1').each(function(index) {
    //get the first word
    var firstWord = $(this).text().split(' ')[0];

    //wrap it with span
    var replaceWord = "<span class='em'>" + firstWord + "</span>";

    //create new string with span included
    var newString = $(this).html().replace(firstWord, replaceWord);

    //apply to the divs
    $(this).html(newString);
});
});

CSS:

span.em { color:red; }

Первое и последнее слово:

jQuery:

$("#lastWord").html(function(){
  var text= $(this).text().trim().split(" ");
  var last = text.pop();
  return text.join(" ") + (text.length > 0 ? " <span class='red'>" + last + "</span>" : last);
});

$("#firstWord").html(function(){
  var text= $(this).text().trim().split(" ");
  var first = text.shift();
  return (text.length > 0 ? "<span class='red'>"+ first + "</span> " : first) + text.join(" ");
});