Wrap first and second word in two different spans with jQuery

I have tried two other suggestions found here to put a span around a word but each time it resulted in the span appearing above the text and not around it. I have the following code: ``` <div class="dateCalendar"> June 10 </div> ``` The jQuery I am currently using is: $('.dateCalendar').html(function(i, v) { return v.replace(/\s(.*?)\s/, ' $1 '); }); The HTML output is showing this: ``` <div class="dateCalendar"> <span></span> June 10 </div> ``` Ideally in the end I would like to wrap the month in a span and the date in another span so I can style them differently in css. Some notes that may be helpful to know: - .dateCalendar will appear more than once on a page - The date is coded in PHP within a Wordpress plugin that I can not alter