javascript - 如何在用户点击javascript时将word包装成span

Question

我有: 简单的 html 文本 block :

<p>
The future of manned space exploration and development of space depends critically on the
creation of a dramatically more proficient propulsion architecture for in-space transportation.
A very persuasive reason for investigating the applicability of nuclear power in rockets is the 
vast energy density gain of nuclear fuel when compared to chemical combustion energy...
</p>

I want: 当用户点击它时将单词包装到 span 中。

I.e. 用户点击了manned这个词，比我应该得到的要多

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

问题:怎么做？有没有比在加载阶段将所有单词包装成 span 更有效的方法？

P.S. 我对 window.getSelection() 不感兴趣，因为我想为触摸的词暗示一些特定的样式，并保留触摸词的集合

@DavidThomas 特别推荐: example where I get selected text, but do not know how to wrap it into span .

Answer 1

我是你，我会用 <span> 包裹所有单词预先标记并更改 class点击。这可能看起来像

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

然后我们可以有一个全局处理程序，它监听 click events在 <span>节点

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

示例:http://jsfiddle.net/z54kehzp/

---

我稍微修改了@Jonast92 的解决方案，我也喜欢他的方法。对于大量数据，它甚至可能更好。唯一需要注意的是，您必须忍受双击才能选择一个词。

示例:http://jsfiddle.net/5D4d3/106/