wrap first n words with span

HTML

<h1 class="hh-1">wrap the first word</h1>
<h1 class="hh-2">wrap the first two words</h1>
<h1 class="hh-3">wrap the first three words</h1>
<h1 class="hh-4">wrap the first four words</h1>

CSS

h1 span {
  background: pink
}

JavaScript

$('h1').html(function (i, t) {
  var hhNumber = 1;
  var words = t.split(/\s+/)
	return "<span>" + words.slice(0,1).join(" ") + "</span> " + words.slice(1).join(" ")
});