jquery - How to wrap word into span on user click in javascript -

jquery - How to wrap word into span on user click in javascript -

i have: simple block of html text:

<p> future of manned space exploration , development of space depends critically on creation of dramatically more proficient propulsion architecture in-space transportation. persuasive reason investigating applicability of nuclear powerfulness in rockets vast energy density gain of nuclear fuel when compared chemical combustion energy... </p>

i want: wrap word span when user click on it.

i.e. user clicked @ manned word, should get

<p> future of <span class="touched">manned</span> space exploration , development of space depends critically on creation of ....

question: how that? there way more efficient wrap words span @ loading stage?

p.s. i'm not interested in window.getselection() because want imply specific styling touched words , maintain collection of touched words

special @davidthomas: example selected text, not know how wrap span.

i you, i'd wrap words <span> tags beforehand , alter class on click. might like

$( 'p' ).html(function( _, html ) { homecoming html.split( /\s+/ ).reduce(function( c, n ) { homecoming c + '<span>' + n + ' </span>' }); });

and have global handler, listens click events on <span> nodes

$( document.body ).on('click', 'span', function( event ) { $( event.target ).addclass( 'touch' ); });

example: http://jsfiddle.net/z54kehzp/

i modified @jonast92 solution slightly, approach also. might improve huge info amounts. caveat there, have live doubleclick select word.

example: http://jsfiddle.net/5d4d3/106/

javascript jquery html