Wrap words with spans after entering text into textarea

My scenario is similar to those live commenting tutorials we've all 开发者_JS百科seen: type text into a textarea & have it display somewhere else on the page while you type. I have the live text input sorted using David Walsh's jQuery tutorial at http://davidwalsh.name/jquery-comment-preview .

Is there a way for me to wrap each word with a span tag in the ouputted div area as well?

You can see my progress at: http://jsfiddle.net/mrmartineau/epdwm/

P.S. it would be lovely to output the text using p tags instead of one long line of text with line breaks, like the question entry form here does.

Many thanks in advance.

something like this? http://jsfiddle.net/epdwm/4/

updated the fiddle: http://jsfiddle.net/epdwm/6/

the important part is the: .replace(/( |, |\. )/g,'[/span]$1[span]') if you want to add more punctuation, add them in the expression.

hope this helps

If I understand the expected result correctly (p instead of line breaks and span between around each word).

http://jsfiddle.net/epdwm/5/