wrap the first word of a title with a span

by hannes

HTML

<h1>This is a title</h1>

<h1>This is another title</h1>

<h1>And another...</h1>

CSS

h1{
font-family:arial;
font-style:normal;
font-size:2.4em;
color:#1E435A;
font-weight:300;
}

h1 span{
color:#ff0000;
font-weight:700;
}

JavaScript

Array.from(document.querySelectorAll('h1')).forEach(function(ele) {
  ele.innerHTML = ele.innerHTML.replace(/^\s*\w+/, '<span>$&</span>');
});