Wrap the first word of text in <span> tag (JavaScript)

Wrapping the first word of text in an element into span tag in JavaScript:

HTML code:

<div class="example">
	<p><b class="class" id="id" data-more="data more">Formam</b> eius in <b>speciem</b> orbis absoluti globatam esse nomen in primis et consensus in eo mortalium orbem appellantium.</p>
	<p>Hic caeli tristitiam discutit atque etiam humani nubila animi serenat.</p>
	<p>Infinitus ac finito similis, omnium rerum certus et similis incerto, extra intra cuncta conplexus in se.</p>
</div>

JavaScript code:

<script>
var text = document.querySelector('.example').innerHTML.trim();
var text_wrapped = text.replace(/^(<[^\/]*[^>]*>)*(\w+\b)/g, '$1<span>$2</span>');

// Printing the result
document.querySelector('.example').innerHTML = text_wrapped;
</script>

CSS code:

/* Styling the look */
.example span{color: #c00; font-weight: bold; text-transform: uppercase;}

Links

1. String.prototype.replace(): developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/replace
2. Element: innerHTML property: developer.mozilla.org/en-US/docs/Web/API/Element/innerHTML
3. Regular expression syntax cheat sheet: developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Regular_expressions/Cheatsheet

Browser support

Windows

Internet Explorer 9.0+

Edge 12.0+

Firefox 3.5+

Google Chrome 1.0+

Opera 10.0+

Safari 3.1+

Linux

Firefox 3.5+

Google Chrome / Chromium

Opera 10.0+

iOS

Safari 2.0+

Android

Samsung Internet 1.0+

Chrome 18.0+

Firefox 4.0+

Opera 10.1+

More

• Generating an HTML list out of page headings in JavaScript
• Wrap each character of a string in <span> tag (JavaScript)
• Wrap each word of text in <span> tag (JavaScript)