Wrap first non-HTML character with span

Wrap first non-HTML character of a paragraph with a span, which can be used to create dropcaps.

HTML

<p>September 2018</p>

CSS

span { color: red; }

JavaScript

(function ($) { 
	$('p').each(function () {
		if ($(this).html()[0] != "<") {
			var node = $(this).contents().filter(function () { return this.nodeType == 3 }).first(),
				text = node.text().replace(/^\s+/g, ''),
				first = text.slice(0, -4);
			if (!node.length)
				return;
			node[0].nodeValue = text.slice(first.length);
			node.before('<span>' + first + '</span>');
		};
	});
})(jQuery);